Colors
Tailwind Configuration
All color tokens must be explicitly defined in your tailwind.config.js. Add these to the theme.extend.colors section:
module.exports = {
theme: {
extend: {
colors: {
// Light theme - Text colors
'light-text-primary': '#000000',
'light-text-secondary': '#686868',
'light-text-disabled': '#9E9E9E',
'light-text-contrast': '#FFFFFF',
// Light theme - Accent colors
'light-accent-main': '#EEAE03',
'light-accent-dark': '#CE8602',
'light-accent-light': '#FFDD43',
'light-accent-contrast': '#000000',
// Dark theme - Text colors
'dark-text-primary': '#EEEEEE',
'dark-text-secondary': '#B0B0B0',
'dark-text-disabled': '#6D6D6D',
'dark-text-contrast': '#000000',
// Dark theme - Accent colors
'dark-accent-main': '#FFCD29',
'dark-accent-dark': '#CE8602',
'dark-accent-light': '#FFDD43',
'dark-accent-contrast': '#000000',
// ... (see full configuration in setup guide)
},
},
},
darkMode: 'class', // Required for theme switching
}Important: All color tokens must use the light- and dark- prefixes, and darkMode: 'class' must be enabled in your Tailwind config.
Color Palette: Default
Below are all available color tokens. Each color automatically switches between light and dark theme values.
Text Colors
Primary
Light: #000000 / Dark: #EEEEEESecondary
Light: #686868 / Dark: #B0B0B0Disabled
Light: #9E9E9E / Dark: #6D6D6DContrast
Light: #FFFFFF / Dark: #000000Accent Colors
Main
Light: #EEAE03 / Dark: #FFCD29Dark
#CE8602Light
#FFDD43Contrast
#000000Primary Colors
Main
Light: #454545 / Dark: #D5D5D5Dark
Light: #262626 / Dark: #E9E9E9Light
Light: #888888 / Dark: #9A9A9ASecondary Colors
Main
Light: #B0B0B0 / Dark: #4F4F4FDark
Light: #888888 / Dark: #454545Light
Light: #D1D1D1 / Dark: #6D6D6DSemantic Colors
Error
Main
Light: #D32F2F / Dark: #E74C4CDark
Light: #A82121 / Dark: #B22323Light
#F27777Warning
Main
Light: #EF6C00 / Dark: #FF8C0ADark
Light: #A84600 / Dark: #CC5302Light
#FFA732Info
Main
Light: #0087D4 / Dark: #00AFFFDark
#006BABLight
#2CC1FFSuccess
Main
Light: #328736 / Dark: #42A547Dark
#2A6B2DLight
#67C16BBackground Colors
Default
Light: #E8E8E8 / Dark: #262626Accent 100
Light: #F1F1F1 / Dark: #333333Accent 200
Light: #F7F7F7 / Dark: #454545Accent 300
Light: #FFFFFF / Dark: #4F4F4FAction Colors
Active
Hover
Selected
Disabled
Miscellaneous
Divider
Light: #D1D1D1 / Dark: #404040Scrollbar
Light: #B0B0B0 / Dark: #4F4F4FColor Palette: Forest
Below are all available color tokens. Each color automatically switches between light and dark theme values.
Text Colors
Primary
Light: #1C2213 / Dark: #D9E5C7Secondary
Light: #515E3C / Dark: #9DAA85Disabled
Light: #8A9670 / Dark: #6D7956Contrast
Light: #FFFFFF / Dark: #000000Accent Colors
Main
Light: #1C2213 / Dark: #E7ECDADark
Light: #2A331E / Dark: #D6DEC3Light
Light: #3A472B / Dark: #F2F5EAContrast
Light: #E7ECDA / Dark: #1C2213Primary Colors
Main
Light: #454545 / Dark: #D5D5D5Dark
Light: #262626 / Dark: #E9E9E9Light
Light: #888888 / Dark: #9A9A9ASecondary Colors
Main
#6E7A5ADark
#5D6849Light
#828D6BSemantic Colors
Error
Main
Light: #D32F2F / Dark: #E74C4CDark
Light: #A82121 / Dark: #B22323Light
#F27777Warning
Main
Light: #EF6C00 / Dark: #FF8C0ADark
Light: #A84600 / Dark: #CC5302Light
#FFA732Info
Main
Light: #0087D4 / Dark: #00AFFFDark
#006BABLight
#2CC1FFSuccess
Main
Light: #328736 / Dark: #42A547Dark
#2A6B2DLight
#67C16BBackground Colors
Default
Light: #D9E5C7 / Dark: #1C2213Accent 100
Light: #E2ECD4 / Dark: #27301BAccent 200
Light: #EBF1E0 / Dark: #364228Accent 300
Light: #F4F7EC / Dark: #424F34Action Colors
Active
Hover
Selected
Disabled
Miscellaneous
Divider
Light: #D1D1D1 / Dark: #404040