Theming

How Theming Works

Sutra UI uses CSS custom properties (variables) for theming. This approach has several advantages over JavaScript-based theming:

• Themes work without JavaScript
• Instant theme switching with no flash of unstyled content
• Easy to customize with standard CSS
• Works with server-side rendering

CSS Variables

Override theme variables in your app.css after importing sutra_ui.css . Sutra UI uses the OKLCH color format for better perceptual uniformity:

@import "../../deps/sutra_ui/priv/static/sutra_ui.css";

/* Custom theme overrides */
:root {
  --primary: oklch(0.65 0.20 145);        /* Green */
  --primary-foreground: oklch(0.98 0 0);  /* White text */

  --destructive: oklch(0.55 0.25 30);     /* Red */
  --radius: 0.5rem;
}

Using shadcn Themes

Sutra UI uses the same CSS variable names as shadcn/ui. You can copy theme variables directly from shadcn/ui themes and paste them into your app.css :

/* Paste shadcn theme variables - they just work! */
:root {
  --background: oklch(1 0 0);
  --foreground: oklch(0.141 0.005 285.823);
  --primary: oklch(0.21 0.006 285.885);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.967 0.001 286.375);
  --muted: oklch(0.967 0.001 286.375);
  --accent: oklch(0.967 0.001 286.375);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.92 0.004 286.32);
  --ring: oklch(0.705 0.015 286.067);
}

Dark Mode

Dark mode is implemented by overriding the CSS variables within a .dark class:

.dark {
  --background: oklch(0.141 0.005 285.823);
  --foreground: oklch(0.985 0 0);
  --primary: oklch(0.70 0.18 145);
  /* ... other dark mode colors ... */
}

Variable Reference

Here are all the available CSS variables and their purpose:

Core Colors

Surface Colors

Sidebar Colors

Chart Colors

Each color variable also has a -foreground variant for text that appears on that background (e.g., --primary-foreground ).