Customize the look and feel of your app with our flexible theming system.
Every app has a theme that controls its colors, fonts, and overall look. You can change your app's theme at any time from the theme editor — no design experience needed.
The easiest way to change your app's look. Choose from a collection of handcrafted themes and apply one with a single click.
For more control, you can fine-tune any color, font, or spacing value directly. Start from a preset and tweak from there.
If you want to go beyond the presets, the theme editor lets you adjust individual values like your primary color, background, fonts, and corner roundness. Changes preview instantly so you can see exactly what your app will look like.
Start from a preset that's close to what you want, then adjust the individual values. This is much easier than building a theme from scratch.
Here are all the CSS custom properties available in our theme system. Each variable serves a specific purpose in creating a cohesive design.
| Variable | Purpose | Usage |
|---|---|---|
--background | Main page background color | Body, main containers |
--foreground | Primary text color | Headings, body text |
--card | Card background color | Cards, panels, modals |
--card-foreground | Text color on cards | Text within cards |
--popover | Popover background color | Popovers, tooltips, dropdowns |
--popover-foreground | Text color on popovers | Text within popovers |
| Variable | Purpose | Usage |
|---|---|---|
--primary | Primary brand color | Primary buttons, links, highlights |
--primary-foreground | Text color on primary elements | Text on primary buttons |
--secondary | Secondary accent color | Secondary buttons, subtle highlights |
--secondary-foreground | Text color on secondary elements | Text on secondary buttons |
--muted | Muted background color | Disabled states, subtle backgrounds |
--muted-foreground | Muted text color | Secondary text, descriptions |
--accent | Accent color for highlights | Hover states, active elements |
--accent-foreground | Text color on accent elements | Text on accent backgrounds |
--destructive | Destructive action color | Delete buttons, error states, warnings |
--destructive-foreground | Text color on destructive elements | Text on destructive buttons |
| Variable | Purpose | Usage |
|---|---|---|
--border | Border color | Dividers, card borders |
--input | Input field border color | Form inputs, text areas |
--ring | Focus ring color | Focus indicators, accessibility |
--radius | Border radius value | Rounded corners (e.g., "0.5rem") |
--spacing | Base spacing unit | Consistent spacing (e.g., "0.25rem") |
| Variable | Purpose | Usage |
|---|---|---|
--chart-1 | First chart color | Data visualization, graphs |
--chart-2 | Second chart color | Data visualization, graphs |
--chart-3 | Third chart color | Data visualization, graphs |
--chart-4 | Fourth chart color | Data visualization, graphs |
--chart-5 | Fifth chart color | Data visualization, graphs |
Sidebar-specific colors for apps with navigation sidebars.
| Variable | Purpose | Usage |
|---|---|---|
--sidebar-background | Sidebar background color | Sidebar containers |
--sidebar-foreground | Sidebar text color | Sidebar text, icons |
--sidebar-primary | Sidebar primary color | Active sidebar items |
--sidebar-primary-foreground | Text color on sidebar primary | Text on active sidebar items |
--sidebar-accent | Sidebar accent color | Hover states in sidebar |
--sidebar-accent-foreground | Text color on sidebar accent | Text on hover states |
--sidebar-border | Sidebar border color | Sidebar dividers, edges |
--sidebar-ring | Sidebar focus ring color | Focus indicators in sidebar |
| Variable | Purpose | Usage |
|---|---|---|
--font-sans | Sans-serif font family | Body text, UI elements |
--font-serif | Serif font family | Headings, decorative text |
--font-mono | Monospace font family | Code blocks, technical text |
Our theme system follows consistent naming conventions that make it intuitive to work with. Understanding these patterns will help you create harmonious themes.
Each UI element typically has a background color and a matching foreground (text) color that ensures proper contrast. For example, primary and primary-foreground are used together.
Our theme system uses semantic color variables that describe their purpose rather than their appearance. This approach ensures consistent design and makes theme switching seamless.
| Variable | Purpose |
|---|---|
background / foreground | Main page background and text colors |
card / card-foreground | Card elements and their text |
primary / primary-foreground | Primary actions, buttons, highlights |
muted / muted-foreground | Subdued elements, secondary text |