Default
The reference: ink neutrals, a violet brand, a sand accent.
id: default
Variables
The semantic tokens every component and block reads, resolved for this theme.
Light
| --background | #fff | |
| --foreground | #17181a | |
| --card | #fff | |
| --muted | #f6f6f5 | |
| --muted-foreground | #6e7177 | |
| --border | #e7e8ea | |
| --primary | #17181a | |
| --primary-foreground | #fff | |
| --secondary | #f3f2f0 | |
| --accent | #f3f2f0 | |
| --brand | #6055d6 | |
| --brand-foreground | #fff | |
| --brand-soft | #f4f3fe | |
| --brand-text | #6055d6 | |
| --ring | #c9c5f2 | |
| --success | #2f9e6a | |
| --warning | #e2b33c | |
| --destructive | #c4372f | |
| --info | #2e6fd6 | |
| --commerce | #c4893d |
Dark
| --background | #17181a | |
| --foreground | #f6f6f5 | |
| --card | #2d2f32 | |
| --muted | #141517 | |
| --muted-foreground | #a3a6ab | |
| --border | #3c3e43 | |
| --primary | #f6f6f5 | |
| --primary-foreground | #17181a | |
| --secondary | #2d2f32 | |
| --accent | #2d2f32 | |
| --brand-soft | #221f3d | |
| --brand-text | #8b82e6 | |
| --ring | #6055d6 | |
| --destructive | #e5736b | |
| --info | #6f9ef0 | |
| --commerce | #d9b98a |
Palette
brand
accent
neutral
Use it
@import '@trame-ui/themes/themes/default/css/tokens.css';
@import '@trame-ui/themes/themes/default/css/theme-light.css';
@import '@trame-ui/themes/themes/default/css/theme-dark.css';
@import '@trame-ui/themes/themes/default/css/theme-moods.css';
@import '@trame-ui/themes/themes/default/css/type.css';
@import '@trame-ui/themes/themes/default/css/controls.css';
@import '@trame-ui/themes/themes/default/css/motion.css';