Themes

A theme overrides the semantic --ds-* contract for light and dark; every component follows it. Pick a preset for the whole site from the header, try one below, or bring your own.

Read the theming guide · Open Theme Studio in Storybook

Preset gallery

Each card renders real Gaudi components inside its own data-theme scope, in the current colour mode.

Gaudi
The default Gaudi theme: neutral surfaces, functional blue accents, Inter and JetBrains Mono.
Active
Gaudi progress
Notify
Folio
Warm editorial: cream paper, ink text, a terracotta accent and serif headings.
Folio progress
Notify
Graphite
Cool minimal: graphite accent, flat surfaces, square corners and monospace type.
Graphite progress
Notify
High Contrast
Maximum legibility: pure black and white, 7:1 text, strong borders and an amber focus.
High Contrast progress
Notify
Pastel
Soft and friendly: lavender-tinted surfaces, gentle tints and generous rounding.
Pastel progress
Notify
Midnight
Dark-first: deep indigo night surfaces, an electric accent and cyan focus.
Midnight progress
Notify
Grove
Nature: moss green on warm stone, ochre highlights and humanist type.
Grove progress
Notify
Ember
Bold and energetic: a vivid orange accent, grotesk type and confident elevation.
Ember progress
Notify

Import

Paste theme CSS from StyleGlide, tweakcn or shadcn/ui themes, a shadcn registry item, or Gaudi theme JSON. It is mapped with importTheme, contrast-repaired, applied to the whole site and kept in local storage.

Theme CSS or JSON

Export

The active theme (Gaudi) through exportTheme.

gaudi.css

/* Gaudi: shadcn-compatible theme exported from Gaudi (gaudi) */:root {  --background: #ffffff;  --foreground: #171717;  --card: #ffffff;  --card-foreground: #171717;  --popover: #ffffff;  --popover-foreground: #171717;  --primary: #2563eb;  --primary-foreground: #ffffff;  --secondary: #dbeafe;  --secondary-foreground: #171717;  --muted: #fafafa;  --muted-foreground: #404040;  --accent: #eff6ff;  --accent-foreground: #171717;  --destructive: #b91c1c;  --destructive-foreground: #ffffff;  --success: #15803d;  --success-foreground: #ffffff;  --warning: #b45309;  --warning-foreground: #ffffff;  --info: #2563eb;  --info-foreground: #ffffff;  --border: #d4d4d4;  --input: #d4d4d4;  --ring: #0f766e;  --chart-1: #2563eb;  --chart-2: #0f766e;  --chart-3: #4f46e5;  --chart-4: #d97706;  --chart-5: #be123c;  --sidebar: #fafafa;  --sidebar-foreground: #171717;  --sidebar-primary: #2563eb;  --sidebar-primary-foreground: #ffffff;  --sidebar-accent: #eff6ff;  --sidebar-accent-foreground: #171717;  --sidebar-border: #d4d4d4;  --sidebar-ring: #0f766e;  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);  --shadow-md: 0 2px 3px -1px rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(25, 28, 33, 0.02), 0 0 0 1px rgba(25, 28, 33, 0.08);  --shadow-lg: 0 10px 20px -12px rgb(0 0 0 / 0.25);  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.05);  --shadow-2xl: 0 28px 64px -24px rgba(15, 23, 42, 0.42), 0 10px 28px -18px rgba(15, 23, 42, 0.24);  --shadow-2xs: 0 1px 2px rgba(15, 23, 42, 0.04);  --shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);  --radius: 4px;  --font-sans: var(--font-space-inter, "Inter Variable"), "Inter Variable", system-ui, sans-serif;  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;  --font-mono: "JetBrains Mono", Menlo, Monaco, monospace;}
.dark {  --background: #1a1a1a;  --foreground: #d4d4d4;  --card: #212121;  --card-foreground: #d4d4d4;  --popover: #212121;  --popover-foreground: #d4d4d4;  --primary: #93c5fd;  --primary-foreground: #172554;  --secondary: #1e3a8a;  --secondary-foreground: #d4d4d4;  --muted: #262626;  --muted-foreground: #a3a3a3;  --accent: #172554;  --accent-foreground: #d4d4d4;  --destructive: #fca5a5;  --destructive-foreground: #450a0a;  --success: #86efac;  --success-foreground: #052e16;  --warning: #fcd34d;  --warning-foreground: #451a03;  --info: #93c5fd;  --info-foreground: #172554;  --border: #303030;  --input: #303030;  --ring: #5eead4;  --chart-1: #60a5fa;  --chart-2: #2dd4bf;  --chart-3: #a5b4fc;  --chart-4: #f59e0b;  --chart-5: #fb7185;  --sidebar: #262626;  --sidebar-foreground: #d4d4d4;  --sidebar-primary: #93c5fd;  --sidebar-primary-foreground: #172554;  --sidebar-accent: #172554;  --sidebar-accent-foreground: #d4d4d4;  --sidebar-border: #303030;  --sidebar-ring: #5eead4;  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);  --shadow-md: 0 2px 3px -1px rgba(0, 0, 0, 0.1), 0 1px 0 0 rgba(25, 28, 33, 0.02), 0 0 0 1px rgba(25, 28, 33, 0.08);  --shadow-lg: 0 10px 20px -12px rgb(0 0 0 / 0.25);  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.05);  --shadow-2xl: 0 28px 64px -24px rgba(0, 0, 0, 0.82), 0 10px 28px -18px rgba(0, 0, 0, 0.72);  --shadow-2xs: 0 1px 2px rgba(15, 23, 42, 0.04);  --shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);}
@theme inline {  --color-background: var(--background);  --color-foreground: var(--foreground);  --color-card: var(--card);  --color-card-foreground: var(--card-foreground);  --color-popover: var(--popover);  --color-popover-foreground: var(--popover-foreground);  --color-primary: var(--primary);  --color-primary-foreground: var(--primary-foreground);  --color-secondary: var(--secondary);  --color-secondary-foreground: var(--secondary-foreground);  --color-muted: var(--muted);  --color-muted-foreground: var(--muted-foreground);  --color-accent: var(--accent);  --color-accent-foreground: var(--accent-foreground);  --color-destructive: var(--destructive);  --color-destructive-foreground: var(--destructive-foreground);  --color-success: var(--success);  --color-success-foreground: var(--success-foreground);  --color-warning: var(--warning);  --color-warning-foreground: var(--warning-foreground);  --color-info: var(--info);  --color-info-foreground: var(--info-foreground);  --color-border: var(--border);  --color-input: var(--input);  --color-ring: var(--ring);  --color-chart-1: var(--chart-1);  --color-chart-2: var(--chart-2);  --color-chart-3: var(--chart-3);  --color-chart-4: var(--chart-4);  --color-chart-5: var(--chart-5);  --color-sidebar: var(--sidebar);  --color-sidebar-foreground: var(--sidebar-foreground);  --color-sidebar-primary: var(--sidebar-primary);  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);  --color-sidebar-accent: var(--sidebar-accent);  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);  --color-sidebar-border: var(--sidebar-border);  --color-sidebar-ring: var(--sidebar-ring);  --font-sans: var(--font-sans);  --font-serif: var(--font-serif);  --font-mono: var(--font-mono);  --radius-sm: calc(var(--radius) - 4px);  --radius-md: calc(var(--radius) - 2px);  --radius-lg: var(--radius);  --radius-xl: calc(var(--radius) + 4px);  --shadow-2xs: var(--shadow-2xs);  --shadow-xs: var(--shadow-xs);  --shadow-sm: var(--shadow-sm);  --shadow: var(--shadow);  --shadow-md: var(--shadow-md);  --shadow-lg: var(--shadow-lg);  --shadow-xl: var(--shadow-xl);  --shadow-2xl: var(--shadow-2xl);}

Credits

The contract follows the shadcn/ui CSS-variable convention, so themes from StyleGlide, tweakcn and the shadcn/ui theme editor import as-is. Theme Studio is inspired by all three; design your themes there.