Theming

One semantic contract, eight WCAG AA presets, a runtime provider and lossless import/export.

A theme overrides the semantic --ds-* contract (surfaces, text, borders, accent, focus, status, charts, sidebar and shadows for light and dark, plus fonts, radius and density). Every other token derives from it, so components need no theme-specific code.

// Static: every preset, switched by an attributeimport '@gaudi/design-system/themes.css';// <html data-theme='folio' className='dark'>
// Next.js App Router: no-flash script in app/layout.jsx, provider in a client componentimport { getThemeScript, ThemeProvider, useTheme } from '@gaudi/design-system/themes';// <head><script dangerouslySetInnerHTML={{ __html: getThemeScript() }} /></head>// <ThemeProvider defaultMode='system'>{children}</ThemeProvider>// const { theme, setTheme, mode, setMode } = useTheme();

Presets

Try them live: each card is a nested data-theme scope; Use applies the preset to the whole site (the header picker does the same).

• Gaudi

  The default Gaudi theme: neutral surfaces, functional blue accents, Inter and JetBrains Mono.

  Active

  PrimaryOutline

  Gaudi progress

  Notify

  In use

• Folio

  Warm editorial: cream paper, ink text, a terracotta accent and serif headings.

  PrimaryOutline

  Folio progress

  Notify

  Use Folio

• Graphite

  Cool minimal: graphite accent, flat surfaces, square corners and monospace type.

  PrimaryOutline

  Graphite progress

  Notify

  Use Graphite

• High Contrast

  Maximum legibility: pure black and white, 7:1 text, strong borders and an amber focus.

  PrimaryOutline

  High Contrast progress

  Notify

  Use High Contrast

• Pastel

  Soft and friendly: lavender-tinted surfaces, gentle tints and generous rounding.

  PrimaryOutline

  Pastel progress

  Notify

  Use Pastel

• Midnight

  Dark-first: deep indigo night surfaces, an electric accent and cyan focus.

  PrimaryOutline

  Midnight progress

  Notify

  Use Midnight

• Grove

  Nature: moss green on warm stone, ochre highlights and humanist type.

  PrimaryOutline

  Grove progress

  Notify

  Use Grove

• Ember

  Bold and energetic: a vivid orange accent, grotesk type and confident elevation.

  PrimaryOutline

  Ember progress

  Notify

  Use Ember

Bring any StyleGlide, tweakcn or shadcn/ui theme: the contract follows the shadcn CSS-variable convention, so their themes import as-is on the Themes page, with gaudi-ds theme import, or through the import_theme MCP tool.