Theming

How theming works

The design system uses CSS variables for all visual tokens. Two files control the theme:

tokens.css — defines raw CSS variables in :root (light) and .dark scopes
theme.css — bridges those variables to Tailwind v4 utility classes via @theme inline

Quick customization

Override any variable after importing the defaults:

app/globals.css

@import "tailwindcss";
@import "@retents/ui/tokens.css";
@import "@retents/ui/theme.css";
@source "./node_modules/@retents/ui/src/**/*.tsx";

@layer base {
  :root {
    --primary: 220 90% 50%;           /* Blue instead of orange */
    --primary-foreground: 0 0% 100%;
    --radius: 8px;                     /* Tighter corners */
  }
  .dark {
    --primary: 220 90% 60%;
  }
}

Available tokens

Colors

Token	Light default	Dark default	Usage
`--background`	`20 14.3% 96.1%`	`20 14.3% 2.1%`	Page background
`--foreground`	`60 9.1% 3.8%`	`60 9.1% 97.8%`	Default text
`--primary`	`20.5 90.2% 48.2%`	`20.5 90.2% 48.2%`	Brand color
`--secondary`	`12 6.5% 75.1%`	`12 6.5% 15.1%`	Secondary elements
`--accent`	`12 6.5% 85.1%`	`12 6.5% 15.1%`	Hover highlights
`--muted`	`12 6.5% 75.1%`	`12 6.5% 15.1%`	Subtle backgrounds
`--destructive`	`0 72.2% 93.6%`	`0 72.2% 14.6%`	Error/danger
`--border`	`20 15.5% 88.1%`	`20 15.5% 14.1%`	Default borders
`--input`	`20 6.5% 98.1%`	`20 6.5% 6.1%`	Input backgrounds
`--ring`	`20.5 90.2% 48.2%`	`20.5 90.2% 48.2%`	Focus rings

Radius

Token	Default
`--radius`	`12px`

Consumer setup

The @source directive is essential for Tailwind v4 to scan component files and generate the right utility classes:

@source "./node_modules/@retents/ui/src/**/*.tsx";

Dark mode

Dark mode is class-based. Toggle by adding class="dark" to <html>:

// With next-themes
<html className={theme === "dark" ? "dark" : ""}>

All tokens automatically switch to their .dark variants.

Using tokens in JavaScript

For non-Tailwind consumers:

import { colors, radius } from "@retents/ui/tokens"

console.log(colors.primary.DEFAULT) // "hsl(var(--primary))"
console.log(radius.lg)              // "var(--radius)"

On this page