Theming

This page provides an overview of the possible variables for theme customization on your platform. By customizing these variables, you can easily control the colors, fonts, and other visual aspects of games.

Colors

• destructive: Controls the color for destructive elements. Default: #FF0000
• destructiveForeground: Controls the foreground color for destructive elements. Default: #F8FAFC
• healthy: Controls the color for healthy elements. Default: #26C080
• healthyForeground: Controls the foreground color for healthy elements. Default: #F8FAFC
• primary: Controls the primary color. Default: #0F172A
• primaryForeground: Controls the foreground color for primary elements. Default: #F8FAFC
• background: Controls the background color. Default: #FFFFFF
• border: Controls the color for borders. Default: #E2E8F0
• foreground: Controls the foreground color. Default: #0F172A
• input: Controls the color for input elements. Default: #E2E8F0
• ring: Controls the color for ring elements. Default: #94A3B8
• muted: Controls the muted color. Default: #F1F5F9
• mutedForeground: Controls the foreground color for muted elements. Default: #64748B

Fonts

• fontSans: Controls the font family for sans-serif text. Default: Barlow

Other

• radius: Controls the border radius in pixels. Default: 8