Customize

Colors & Theme

Vexui uses semantic CSS variables and persisted settings rather than hard-coded component colors.

Where theme settings live

File	Responsibility
`src/styles.css`	OKLCH design tokens, default sapphire accent ramp, light/dark tokens, and named skin ramps.
`src/lib/nova-settings.ts`	Theme mode, skin, sidebar, header, width, and collapse state; persisted in local storage as `nova-admin-settings`.

Default primary color

The default Sapphire skin uses #0868f7 for --accent-600. Components use semantic tokens such as bg-primary, text-muted-foreground, and border-border.

:root {
  --accent-600: #0868f7;
  --primary: var(--accent-600);
  --background: oklch(0.976 0.004 268);
  --foreground: oklch(0.279 0.031 262);
}

Supported skin choices

Sapphire, Emerald, Violet, Rose, Orange, Cyan, and Graphite are defined in src/lib/nova-settings.ts and src/styles.css.

Dark mode

The supported modes are light, dark, and system. The setting toggles the .dark class and data-bs-theme on the document root. Use existing semantic variables so new UI automatically follows each mode.

TipPrefer semantic tokens over a literal hex color in component markup so skin switching continues to work.

Widget and status palettes

Use semantic success, warning, info, destructive, and primary tones for distinct summary cards and icon backgrounds. Keep chart series consistent with the selected skin, and distinguish multiple series with labels, line styles, or shades. Verify hover tooltips and legend contrast in both light and dark modes.