Theming

The theme is a set of CSS custom properties in OKLCH. Components reference the tokens, so restyling is editing variables, and dark mode is one class.

For live six-axis customization, scoped themes, and CSS export, see Theme engine.

Tokens

Tokens hold complete color values (not channel triples), so they port 1:1 and stay editor-compatible. A .dark class on a parent swaps the palette.

:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --warning: oklch(0.554191 0.116908 75.008);
  --warning-foreground: oklch(1 0 0);
  --border: oklch(0.922 0 0);
  --radius: 0.625rem;
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --warning: oklch(0.754289 0.11595 78.624);
  --warning-foreground: oklch(0.196091 0.004248 84.591);
  /* ... */
}

Tailwind v4

The token stylesheet (zits-ui.css) carries a @theme inline block that wires --color-* to the tokens, so once it is part of your build, utilities like bg-primary and text-muted-foreground resolve, opacity modifiers like bg-primary/90 included. It is not zero-config: run the Tailwind v4 standalone CLI (no Node) over an input stylesheet that imports Tailwind, @source-scans your markup and the vendored component dirs, and imports the token stylesheet.

@import "tailwindcss";

/* Scan your own markup and the component dirs the CLI copied in. */
@source "./Components/**/*.razor";
@source "./Zits/**/*.razor";
@source "./Navius/**/*.razor";

/* Tokens + the @theme inline bridge that makes bg-primary resolve. */
@import "./wwwroot/zits-ui.css";

The block above is the vendored recipe: navius add theme copies zits-ui.css into your wwwroot, and you @source the copied ./Zits and ./Navius dirs. Package mode differs: import the token stylesheet from the static web assets at _content/Zits.Ui/zits-ui.css and @source only your own markup. Either way, compile to wwwroot/app.css and link that one file.

Dark mode

Toggle the dark class on <html> (this site ships dark by default). No component changes; they read the tokens.