Theming

Black, white, and neutral grays. Color where it has a job to do.

The palette

These swatches read the current theme. Use the theme button in the header to compare light and dark.

Controls on every surface

Fields use a separate --control fill so they remain visible inside cards and floating panels. Visible text identifies the field; focus and error states add a ring. Small empty controls keep a semantic boundary. Try typing, tabbing, and switching themes below.

Theme tokens

The installed app.css maps CSS variables through Tailwind's @theme inline. Update the variables to change every component that uses them.

:root {
  --background: #ffffff;
  --foreground: #202020;
  --card: #ffffff;
  --popover: #ffffff;
  --secondary: #f5f5f5;
  --muted: #f5f5f5;
  --muted-foreground: #626262;
  --primary: #171717;
  --primary-hover: #333333;
  --primary-foreground: #ffffff;
  --control: #e8e8e8;
  --input: #8a8a8a;
  --ring: var(--primary);
}

.dark {
  --background: #000000;
  --foreground: #f5f5f5;
  --card: #141414;
  --popover: #202020;
  --secondary: #202020;
  --muted: #202020;
  --muted-foreground: #a3a3a3;
  --primary: #f5f5f5;
  --primary-hover: #d9d9d9;
  --primary-foreground: #171717;
  --control: #363636;
  --input: #858585;
}

Add your brand color

Override the primary, hover, and foreground colors together. The selected-state fills derive from your primary color. Check text and focus contrast in both themes.

:root {
  --primary: #6d28d9;
  --primary-hover: #5b21b6;
  --primary-foreground: #ffffff;
}

.dark {
  --primary: #c4b5fd;
  --primary-hover: #ddd6fe;
  --primary-foreground: #221442;
}

Surfaces and status

Motion and dark mode