Color Library
Color names ¶
| Color name | CSS variable | Where to use | |
|---|---|---|---|
| bg-primary | --ui-bg-primary |
Primary color. | |
| fg-primary | --ui-fg-primary |
Foreground text color to use on primary color. | |
| bg-accent | --ui-bg-accent |
Accent color. | |
| fg-accent | --ui-fg-accent |
Foreground text color to use on accent color. | |
| bg-neutral | --ui-bg-neutral |
Neutral dark color, For not-saturated parts of UI. | |
| fg-neutral | --ui-fg-neutral |
Foreground text color to use on neutral color. | |
| bg-base | --ui-bg-base |
Base surface color of page, used for blank background. | |
| bg-base-100 | --ui-bg-base-100 |
Base surface color of panels. | |
| bg-base-200 | --ui-bg-base-200 |
Base color, darker shade. | |
| bg-base-300 | --ui-bg-base-300 |
Base color, even more darker shade. | |
| bg-base-400 | --ui-bg-base-400 |
Base color, even more darker shade. | |
| fg-base | --ui-fg-base |
Foreground text color to use on base color. | |
| fg-input | --ui-fg-input |
Foreground text color to use on form fields. | |
| fg-muted | --ui-fg-muted |
Dimmed foreground text color. | |
| bg-info | --ui-bg-info |
Info color, For informative/helpful messages. | |
| fg-info | --ui-fg-info |
Foreground text color to use on info color. | |
| bg-success | --ui-bg-success |
Success color, For success/safe messages. | |
| fg-success | --ui-fg-success |
Foreground text color to use on success color. | |
| bg-warning | --ui-bg-warning |
Warning color, For warning/caution messages. | |
| fg-warning | --ui-fg-warning |
Foreground text color to use on warning color. | |
| bg-critical | --ui-bg-critical |
Critical color, For error/danger/destructive messages. | |
| fg-critical | --ui-fg-critical |
Foreground text color to use on critical color. | |
| bg-option | --ui-bg-option |
For option messages. | |
| fg-option | --ui-fg-option |
Foreground text color to use on option color. | |
| border-default | --ui-border-default |
Default border color. | |
| border-muted | --ui-border-muted |
Dimmed border color. | |
| border-disabled | --ui-border-disabled |
Border color to use on disabled elements. | |
Color palette ¶
The CSS variables are defined in the jxui.css file, and can be used in your CSS files like var(--ui-NAME), for example var(--ui-red-500).