Theming

Vera UI is built on CSS custom properties. Every color, radius, shadow, and font is a CSS variable that you can override — either in plain CSS or programmatically via the ThemeProvider tokens prop.

How It Works

All design tokens are defined in the library's stylesheet under a @layer vera-defaults block. Because they live in a named layer, any CSS you write outside a layer automatically takes precedence — no !important needed.

/* Library internals (simplified) */
@layer vera-defaults {
  :root {
    --primary: oklch(0.488 0.243 264.376);
    --radius: 0.625rem;
    /* ... */
  }
}

You override them simply by declaring the variable in your own stylesheet after importing the library CSS.

Approach 1 — CSS Override

Best for: static brand colors, global theme, no JavaScript required.

@import "@helgadigitals/vera-ui/styles";
@import "tailwindcss";

@import "@helgadigitals/vera-ui/styles";
@import "tailwindcss";

:root {
  --primary: oklch(0.52 0.22 150);          /* your brand green */
  --primary-foreground: oklch(1 0 0);
  --radius: 0.5rem;                          /* slightly less rounded */
  --font-sans: "DM Sans", sans-serif;
}

.dark {
  --primary: oklch(0.62 0.22 150);          /* lighter in dark mode */
  --background: oklch(0.12 0 0);
}

Approach 2 — ThemeProvider tokens Prop

Best for: tokens loaded from an API, per-tenant branding, or A/B testing color schemes.

The ThemeProvider component accepts a tokens prop. Each key maps to a CSS custom property that gets injected on document.documentElement at runtime.

import { ThemeProvider } from '@helgadigitals/vera-ui'

export default function App() {
  return (
    <ThemeProvider
      tokens={{
        primary: 'oklch(0.52 0.22 150)',
        'primary-foreground': 'oklch(1 0 0)',
        radius: '0.5rem',
        'font-sans': '"DM Sans", sans-serif',
      }}
    >
      {/* your app */}
    </ThemeProvider>
  )
}

Tokens can come from anywhere — a database, a config file, user preferences:

import { useEffect, useState } from 'react'
import { ThemeProvider, type DesignTokens } from '@helgadigitals/vera-ui'

export default function App() {
  const [tokens, setTokens] = useState<DesignTokens>({})

  useEffect(() => {
    fetch('/api/brand-config')
      .then(r => r.json())
      .then(config => setTokens(config.tokens))
  }, [])

  return (
    <ThemeProvider tokens={tokens}>
      {/* your app */}
    </ThemeProvider>
  )
}

Token Reference

All token keys accepted by the tokens prop and valid as CSS variable overrides.

Colors

Sidebar

Charts

Typography & Shape

Color Format

Vera UI defaults use OKLCH — a perceptually uniform color space that makes it easy to create accessible color scales. You can use any CSS color format your browser supports:

/* All of these work */
--primary: oklch(0.52 0.22 150);     /* recommended */
--primary: hsl(142 60% 42%);
--primary: #2d8a55;
--primary: rgb(45, 138, 85);