Customize

Colors & Theme

Edzen 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, Sapphire and Multicolor accent ramps, 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 `edzen-admin-settings`.

Default primary color

The app opens with the Multicolor skin, which uses #0e7974 for --accent-600. Sapphire is an available alternative skin and uses #0868f7. Components use semantic tokens such as bg-primary, text-muted-foreground, and border-border.

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

Supported skin choices

Multicolor, 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.