Founding price: $35, then $79.99

Get Pro
Get Pro

14 base themes, four sliders

Remix a theme until it is yours

Start from a finished theme, turn the hues, set the intensity and corners, and copy the exact CSS. Everything you see in the preview is what lands in your file.

Open the remixerBrowse all themes
0°
100%
0°
0.75rem

Contrast (WCAG)

  • Text on page17.3 : 1 pass
  • Button label5.6 : 1 pass
  • Muted text6.0 : 1 pass

Brand hue turns primary, ring, sidebar primary and the five chart colours. Surface hue turns background, card, popover, muted, secondary, accent, border and input. Lightness never changes, so contrast stays close to the base theme.

Live preview

Plan

Team workspace

Invite people, set roles and keep everything in one place.

NewBetaOutline

Usage

:root {
  --radius: 0.75rem;
  --spacing: 0.25rem;
  --background: oklch(0.986 0.004 196);
  --foreground: oklch(0.2 0.022 210);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.2 0.022 210);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.2 0.022 210);
  --primary: oklch(0.5 0.086 192);
  --primary-foreground: oklch(0.988 0.008 190);
  --secondary: oklch(0.958 0.01 196);
  --secondary-foreground: oklch(0.26 0.03 205);
  --muted: oklch(0.958 0.008 200);
  --muted-foreground: oklch(0.49 0.022 210);
  --accent: oklch(0.948 0.028 188);
  --accent-foreground: oklch(0.34 0.068 194);
  --destructive: oklch(0.55 0.2 26);
  --border: oklch(0.912 0.01 200);
  --input: oklch(0.68 0.02 205);
  --ring: oklch(0.6 0.1 190);
  --chart-1: oklch(0.6 0.104 188);
  --chart-2: oklch(0.62 0.13 240);
  --chart-3: oklch(0.76 0.14 78);
  --chart-4: oklch(0.64 0.17 22);
  --chart-5: oklch(0.58 0.16 300);
  --sidebar: oklch(1 0 0);
  --sidebar-foreground: oklch(0.2 0.022 210);
  --sidebar-primary: oklch(0.5 0.086 192);
  --sidebar-primary-foreground: oklch(0.988 0.008 190);
  --sidebar-accent: oklch(0.948 0.028 188);
  --sidebar-accent-foreground: oklch(0.34 0.068 194);
  --sidebar-border: oklch(0.912 0.01 200);
  --sidebar-ring: oklch(0.6 0.1 190);
  --shadow-2xs: 0px 1px 0px 0px oklch(0.32 0.05 205 / 5%);
  --shadow-xs: 0px 1px 2px 0px oklch(0.32 0.05 205 / 6%);
  --shadow-sm: 0px 1px 3px 0px oklch(0.32 0.05 205 / 8%), 0px 1px 2px -1px oklch(0.32 0.05 205 / 6%);
  --shadow-md: 0px 6px 14px -4px oklch(0.32 0.05 205 / 10%), 0px 2px 6px -2px oklch(0.32 0.05 205 / 6%);
  --shadow-lg: 0px 14px 30px -8px oklch(0.32 0.05 205 / 14%), 0px 4px 10px -4px oklch(0.32 0.05 205 / 6%);
  --shadow-xl: 0px 24px 48px -12px oklch(0.32 0.05 205 / 18%), 0px 8px 16px -6px oklch(0.32 0.05 205 / 8%);
}

.dark {
  --background: oklch(0.168 0.014 212);
  --foreground: oklch(0.962 0.006 196);
  --card: oklch(0.2 0.016 212);
  --card-foreground: oklch(0.962 0.006 196);
  --popover: oklch(0.218 0.018 212);
  --popover-foreground: oklch(0.962 0.006 196);
  --primary: oklch(0.78 0.118 184);
  --primary-foreground: oklch(0.2 0.035 205);
  --secondary: oklch(0.26 0.018 212);
  --secondary-foreground: oklch(0.962 0.006 196);
  --muted: oklch(0.25 0.016 212);
  --muted-foreground: oklch(0.72 0.022 205);
  --accent: oklch(0.29 0.042 196);
  --accent-foreground: oklch(0.93 0.04 186);
  --destructive: oklch(0.68 0.19 24);
  --border: oklch(0.9 0.02 200 / 10%);
  --input: oklch(0.9 0.02 200 / 18%);
  --ring: oklch(0.72 0.11 186);
  --chart-1: oklch(0.76 0.12 184);
  --chart-2: oklch(0.72 0.13 240);
  --chart-3: oklch(0.82 0.14 82);
  --chart-4: oklch(0.72 0.16 22);
  --chart-5: oklch(0.72 0.14 300);
  --sidebar: oklch(0.2 0.016 212);
  --sidebar-foreground: oklch(0.962 0.006 196);
  --sidebar-primary: oklch(0.78 0.118 184);
  --sidebar-primary-foreground: oklch(0.2 0.035 205);
  --sidebar-accent: oklch(0.29 0.042 196);
  --sidebar-accent-foreground: oklch(0.93 0.04 186);
  --sidebar-border: oklch(0.9 0.02 200 / 10%);
  --sidebar-ring: oklch(0.72 0.11 186);
  --shadow-2xs: 0px 1px 0px 0px oklch(0.05 0.02 220 / 20%);
  --shadow-xs: 0px 1px 2px 0px oklch(0.05 0.02 220 / 24%);
  --shadow-sm: 0px 1px 3px 0px oklch(0.05 0.02 220 / 32%), 0px 1px 2px -1px oklch(0.05 0.02 220 / 24%);
  --shadow-md: 0px 6px 14px -4px oklch(0.05 0.02 220 / 40%), 0px 2px 6px -2px oklch(0.05 0.02 220 / 24%);
  --shadow-lg: 0px 14px 30px -8px oklch(0.05 0.02 220 / 56%), 0px 4px 10px -4px oklch(0.05 0.02 220 / 24%);
  --shadow-xl: 0px 24px 48px -12px oklch(0.05 0.02 220 / 72%), 0px 8px 16px -6px oklch(0.05 0.02 220 / 32%);
}

Next

Using the result

  1. Copy the CSS and replace the :root and .dark blocks in your global stylesheet.
  2. Check the contrast rows above; fix anything marked low by moving the intensity.
  3. Read the theming guide for scoping a theme to part of a page.

FAQ

Questions