Theming

How theming works

Every naUI value is a CSS custom property defined in :root inside core.css. Override any token in your own stylesheet and every component that references it updates automatically - no Sass, no build step.

Brand colours

Override the base colour tokens. Hover/active states are computed automatically via hsl() relative colour syntax.

/* Override in your own stylesheet, after naui.css loads */
:root {
  --color-primary:   #7c3aed;   /* purple brand */
  --color-secondary: #0ea5e9;   /* sky accent */
}

Colour token map

Base semantic colour tokens - these are the ones you override to theme naUI. Every component references these values.

Interaction states

Hover and active states are computed automatically from each base token using relative hsl() colour syntax. You do not need to override these unless you want manual control.

Subtle variants

Each semantic colour automatically gets three derived subtle tokens used for tinted surfaces, borders, and text - computed via color-mix().

Available for: primary, secondary, success, warning, danger, info, brand, accent.

Gray scale

Neutral grays used for surfaces, borders, and text throughout the system.

Typography tokens

Spacing scale

Border radius

naUI defaults to a square (0) design with a pill-only exception.

Dark mode skeleton

[data-theme="dark"] {
  --color-primary:          #60a5fa;
  --na-border-color:        #374151;
  --na-gray-50:             #111827;
  --na-gray-100:            #1f2937;
  --na-gray-900:            #f9fafb;
  /* - override greys + surface tokens */
}