- Docs
- colors
Color Tokens
Semantic color tokens for backgrounds, text, borders, states, and emphasis. Built to support light and dark themes out of the box.
Prerequisites
Flexiwind color tokens are defined using CSS variables and consumed through Tailwind utilities.
Make sure your main stylesheet (usually app.css
) is loaded globally
and that Flexiwind styles are included before any custom overrides.
Do not hardcode color values in your UI. Always rely on semantic tokens to keep your interface consistent, accessible, and theme-ready
Theme Modes
Flexiwind supports multiple theme modes depending on how your application handles color schemes. You can configure your project to support both light and dark themes, or restrict it to a single mode.
| Mode | Description |
|---|---|
both
|
Defines color variables for both light and dark themes.
Recommended for most applications that support theme switching.
|
light
|
Defines color variables for light mode only.
Use this when your application does not support dark mode.
|
dark
|
Defines color variables for dark mode only.
Useful for dark-first or terminal-like interfaces.
|
Variable Tokens
:root {
--primary: var(--color-primary-600);
--secondary: var(--color-secondary-600);
--accent: var(--color-accent-600);
--info: var(--color-info-600);
--warning: var(--color-warning-600);
--danger: var(--color-danger-600);
--success: var(--color-success-600);
--fg-title: var(--color-gray-900);
--fg-subtitle: var(--color-gray-800);
--fg: var(--color-gray-700);
--fg-muted: var(--color-gray-600);
--bg: var(--color-white);
--bg-subtle: var(--color-gray-100);
--bg-surface: var(--color-gray-50);
--bg-muted: var(--color-gray-200);
--bg-surface-elevated: var(--color-gray-300);
--card: var(--color-bg);
--card-gray: var(--color-bg-subtle);
--overlay: var(--color-bg);
--overlay-gray: var(--color-bg-subtle);
--progressbar: var(--color-bg-muted);
--bg-range:var(--color-bg-muted);
--border-strong: var(--color-gray-300);
--border-amphasis: var(--color-gray-400);
--border: var(--color-gray-200);
--border-sub: var(--color-gray-100);
--border-card:var(--color-gray-200);
--border-input: var(--color-gray-200);
--ui-input-focus-outline: var(--color-primary);
--ui-input-place-holder: var(--color-gray-500);
--ui-input-invalid-outline: var(--color-danger);
--ring-bg: var(--color-primary);
--ring-offset-color: var(--color-bg);
--focus-ring: var(--color-primary-200);
--ui-radius: var(--radius-lg);
--card-radius: var(--radius-lg);
--checkbox-radius: var(--radius-sm);
--checkbox-bg: var(--color-bg);
--dropdown-item-outline: var(--color-primary);
--dropdown-item-bg-hover: var(--color-gray-100);
--dropdown-item-fg: var(--color-gray-800);
--dropdown-item-fg-hover: var(--color-gray-900);
--dropdown-item-danger-outline: var(--color-danger);
--dropdown-item-danger-bg-hover: var(--color-danger-100);
--dropdown-item-danger-fg: var(--color-danger-600);
}
.dark {
--primary: var(--color-primary-500);
--secondary: var(--color-secondary-500);
--accent: var(--color-accent-500);
--info: var(--color-info-500);
--warning: var(--color-warning-500);
--danger: var(--color-danger-500);
--success: var(--color-success-500);
--fg-title: var(--color-white);
--fg-subtitle: var(--color-gray-100);
--fg: var(--color-gray-300);
--fg-muted: var(--color-gray-400);
--bg: var(--color-gray-950);
--bg-subtle: var(--color-gray-900);
--bg-surface: --alpha(var(--color-gray-900)/70%);
--bg-muted: var(--color-gray-800);
--bg-surface-elevated: var(--color-gray-700);
--border-strong: var(--color-gray-700);
--border-amphasis: var(--color-gray-600);
--border: var(--color-gray-900);
--border-sub: var(--color-gray-900);
--border-card:var(--color-gray-800);
--border-input:var(--color-gray-800);
--focus-ring: --alpha(var(--c-primary-800)/30%);
--dropdown-item-bg-hover: var(--color-gray-900);
--dropdown-item-fg: var(--color-gray-200);
--dropdown-item-fg-hover: var(--color-gray-50);
--dropdown-item-danger-bg-hover: --alpha(var(--color-danger-500)/10%);
--dropdown-item-danger-fg: var(--color-danger-500);
}Theme Settings
Define in @theme.
Once defined, you can use utilities like
bg-primary
,
border-border
,
or
border-success
anywhere in your UI.
app.css
@theme inline {
--font-sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--radius-ui: var(--radius-lg);
--radius-card: var(--radius-lg);
--radius-checkbox: var(--radius-md);
--color-white: var(--white);
--color-dark: var(--color-gray-950);
--color-primary: var(--primary);
--color-secondary: var(--secondary);
--color-accent: var(--accent);
--color-info: var(--info);
--color-warning: var(--warning);
--color-danger: var(--danger);
--color-success: var(--success);
--color-fg-title: var(--fg-title);
--color-fg-subtitle: var(--fg-subtitle);
--color-fg: var(--fg);
--color-fg-muted: var(--fg-muted);
--color-bg: var(--bg);
--color-bg-subtle: var(--bg-subtle);
--color-bg-surface: var(--bg-surface);
--color-bg-muted: var(--bg-muted);
--color-bg-surface-elevated: var(--bg-surface-elevated);
--color-card: var(--card);
--color-card-gray: var(--card-gray);
--color-popover: var(--bg);
--color-popover-gray: var(--card-gray);
--color-overlay: var(--overlay);
--color-overlay-gray: var(--overlay-gray);
--color-progressbar: var(--progressbar);
--color-border-strong: var(--border-strong);
--color-border-amphasis: var(--border-amphasis);
--color-border: var(--border);
--color-border-sub: var(--border-sub);
--color-border-card: var(--border-card);
--color-border-input: var(--border-input);
--color-primary-50: ...;
/* ... */
--color-primary-950: ..;
--color-secondary-50: ....;
/* ..... */
--color-secondary-950: ....;
/* override the default gray */
--color-gray-50:...;
/* ... */
--color-gray-950:...;
}