Skip to content
Facade UI
filetheme

Theme presets

Three more colour themes: neutral, warm and vivid. Apply one with the data-facade-theme attribute. The default orange theme is in the tokens file.

Installation

Package manager
pnpm dlx shadcn@latest add https://facadeui.dev/r/themes.json

Source

These are the files the CLI copies into your project.

styles/facade-themes.css
/**
 * Facade UI — theme presets.
 *
 * The default palette is in globals.css and needs no attribute. Three more
 * ship here: `neutral` (monochrome), `warm` and `vivid`. Apply one with
 * `data-facade-theme` on <html> or on any subtree:
 *
 *   <html data-facade-theme="warm">        light warm
 *   <html class="dark" data-facade-theme="warm">  dark warm
 *
 * Only shadcn-named tokens are overridden, so every section re-themes for free.
 * a11y: every foreground/background pair below is verified at build time by
 * `scripts/check-contrast.ts` against the WCAG 2.2 AA thresholds.
 */

[data-facade-theme="neutral"] {
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.505 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.985 0 0);
  --border: oklch(0.922 0 0);
  --input: oklch(0.66 0 0);
  --ring: oklch(0.45 0 0);
}

.dark[data-facade-theme="neutral"],
.dark [data-facade-theme="neutral"],
[data-facade-theme="neutral"] .dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.269 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.205 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.782 0 0);
  --accent: oklch(0.371 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(0.145 0 0);
  --border: oklch(1 0 0 / 12%);
  --input: oklch(0.74 0 0);
  --ring: oklch(0.78 0 0);
}

[data-facade-theme="warm"] {
  --background: oklch(0.99 0.005 85);
  --foreground: oklch(0.19 0.014 62);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.19 0.014 62);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.19 0.014 62);
  --primary: oklch(0.47 0.125 48);
  --primary-foreground: oklch(0.99 0.005 85);
  --secondary: oklch(0.955 0.012 82);
  --secondary-foreground: oklch(0.28 0.02 60);
  --muted: oklch(0.955 0.012 82);
  --muted-foreground: oklch(0.48 0.022 62);
  --accent: oklch(0.93 0.026 78);
  --accent-foreground: oklch(0.28 0.03 55);
  --destructive: oklch(0.52 0.2 27);
  --destructive-foreground: oklch(0.99 0.005 85);
  --border: oklch(0.895 0.014 80);
  --input: oklch(0.65 0.018 70);
  --ring: oklch(0.47 0.125 48);
}

.dark[data-facade-theme="warm"],
.dark [data-facade-theme="warm"],
[data-facade-theme="warm"] .dark {
  --background: oklch(0.17 0.012 62);
  --foreground: oklch(0.96 0.008 84);
  --card: oklch(0.22 0.014 62);
  --card-foreground: oklch(0.96 0.008 84);
  --popover: oklch(0.26 0.016 62);
  --popover-foreground: oklch(0.96 0.008 84);
  --primary: oklch(0.78 0.13 62);
  --primary-foreground: oklch(0.2 0.03 55);
  --secondary: oklch(0.27 0.016 62);
  --secondary-foreground: oklch(0.96 0.008 84);
  --muted: oklch(0.27 0.016 62);
  --muted-foreground: oklch(0.784 0.019 72);
  --accent: oklch(0.36 0.03 60);
  --accent-foreground: oklch(0.96 0.008 84);
  --destructive: oklch(0.7 0.18 25);
  --destructive-foreground: oklch(0.17 0.012 62);
  --border: oklch(1 0 0 / 13%);
  --input: oklch(0.742 0.018 72);
  --ring: oklch(0.78 0.13 62);
}

[data-facade-theme="vivid"] {
  --background: oklch(1 0 0);
  --foreground: oklch(0.17 0.02 275);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.17 0.02 275);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.17 0.02 275);
  --primary: oklch(0.46 0.2 272);
  --primary-foreground: oklch(0.99 0.002 275);
  --secondary: oklch(0.965 0.012 275);
  --secondary-foreground: oklch(0.29 0.06 272);
  --muted: oklch(0.965 0.012 275);
  --muted-foreground: oklch(0.47 0.03 275);
  --accent: oklch(0.94 0.03 275);
  --accent-foreground: oklch(0.29 0.08 272);
  --destructive: oklch(0.52 0.2 27);
  --destructive-foreground: oklch(0.99 0.002 275);
  --border: oklch(0.91 0.012 275);
  --input: oklch(0.655 0.022 275);
  --ring: oklch(0.46 0.2 272);
}

.dark[data-facade-theme="vivid"],
.dark [data-facade-theme="vivid"],
[data-facade-theme="vivid"] .dark {
  --background: oklch(0.15 0.022 275);
  --foreground: oklch(0.97 0.006 275);
  --card: oklch(0.2 0.026 275);
  --card-foreground: oklch(0.97 0.006 275);
  --popover: oklch(0.24 0.03 275);
  --popover-foreground: oklch(0.97 0.006 275);
  --primary: oklch(0.79 0.14 272);
  --primary-foreground: oklch(0.17 0.045 272);
  --secondary: oklch(0.26 0.03 275);
  --secondary-foreground: oklch(0.97 0.006 275);
  --muted: oklch(0.26 0.03 275);
  --muted-foreground: oklch(0.784 0.026 275);
  --accent: oklch(0.35 0.06 275);
  --accent-foreground: oklch(0.97 0.006 275);
  --destructive: oklch(0.7 0.18 25);
  --destructive-foreground: oklch(0.15 0.022 275);
  --border: oklch(1 0 0 / 13%);
  --input: oklch(0.742 0.024 275);
  --ring: oklch(0.79 0.14 272);
}