shadcn-html / theming

Theming

The theme is defined by semantic tokens — CSS custom properties that match the tweakcn.com export format. Export a theme from tweakcn, replace default-semantic-tokens.css with the :root and .dark blocks, and every component rethemes instantly.

Surface / Foreground pairs

Every surface token pairs with a foreground token for text/icons placed on it.

Utility tokens

--bordervar(--border)
--inputvar(--input)
--ringvar(--ring)

Radius scale

Set --radius to retheme all border radii. The derived values are computed from it.

--radiusbase (0.625rem)
--radius-smradius − 4px
--radius-mdradius − 2px
--radius-lgbase (--radius)
--radius-xlradius + 4px

Sidebar tokens

Full sidebar token set for sidebar-specific theming. Same surface/foreground pair convention.

Chart tokens

Five chart colors for data visualization.

--chart-1var(--chart-1)
--chart-2var(--chart-2)
--chart-3var(--chart-3)
--chart-4var(--chart-4)
--chart-5var(--chart-5)

Typography tokens

Font stacks as CSS custom properties. Themes can override these to change typography globally.

The quick brown fox --font-sansvar(--font-sans)
The quick brown fox --font-serifvar(--font-serif)
The quick brown fox --font-monovar(--font-mono)

Shadow scale

Theme-aware shadows available as CSS custom properties.

--shadow-2xsvar(--shadow-2xs)
--shadow-xsvar(--shadow-xs)
--shadow-smvar(--shadow-sm)
--shadowvar(--shadow)
--shadow-mdvar(--shadow-md)
--shadow-lgvar(--shadow-lg)
--shadow-xlvar(--shadow-xl)
--shadow-2xlvar(--shadow-2xl)

Spacing & Tracking

Base units that control all spacing and letter-spacing utilities.

--spacing0.25rem (4px)
Aa Bb Cc --tracking-normal0em

Customization

There are two ways to customize the theme:

1. Swap the entire theme

Go to tweakcn.com, design a theme, copy the :root and .dark CSS variable blocks, and replace the contents of default-semantic-tokens.css. Every component updates instantly.

2. Override individual tokens

Add a stylesheet after default-semantic-tokens.css and override specific variables:

<link rel="stylesheet" href="default-semantic-tokens.css">
<style>
  :root {
    --primary: oklch(0.55 0.2 250);
    --primary-foreground: oklch(1 0 0);
    --radius: 0.5rem;
  }
</style>

Dark mode

The theme file includes both :root (light) and .dark (dark) values. To toggle dark mode, add or remove class="dark" on the <html> element. Every token switches automatically — no per-component overrides needed. See the Dark Mode page for system preference detection, localStorage persistence, and a step-by-step toggle implementation.