Theming

Theming allows you to maintain a consistent look and feel across your application.

Pure UI uses CSS variables for theming. You can customize everything from colors to component styles using standard CSS.

How It Works

Pure UI's theming system is built on top of Tailwind CSS v4's theme. When you import tailwindcss, it:

1. Uses Tailwind's built-in color palettes (like --color-neutral-*)
2. Maps them to semantic variables for easier use
3. Automatically switches between light and dark themes
4. Uses CSS layers and the @theme directive for organization

The system follows a simple naming pattern:

• Colors without a suffix are backgrounds (e.g., --accent)
• Colors with --foreground are for text on that background (e.g., --accent-foreground)

<div className="bg-accent text-accent-foreground">Hello</div>

List of Variables

UI Colors

Chart Colors

Sidebar Colors