Theme

Live token editor

Spacing & radius

Preview

Preset themes

Click a preset to apply it. Each theme provides light-dark() values so it works in both light & dark modes.

Token reference

All available --oat-* tokens grouped by category. Each maps to an upstream Oat CSS variable.

Color tokens

Spacing tokens

Border radius tokens

Typography tokens

Shadow & misc tokens

Customization examples

1 — Override tokens in CSS (zero JS)

The simplest approach. Add overrides in your global stylesheet:

/* styles.css */
:root {
  --primary: #3b82f6;          /* Override upstream Oat variable directly */
  --radius-medium: 0.75rem;    /* Rounder corners */
  --border: #e2e8f0;
}

2 — Use provideNgOatTheme() at bootstrap

Set tokens via Angular DI so they're applied before the first render:

// app.config.ts
import { provideNgOatTheme } from '@letsprogram/ng-oat';

export const appConfig = {
  providers: [
    provideNgOatTheme({
      tokens: {
        '--oat-primary':            '#3b82f6',
        '--oat-primary-foreground': '#ffffff',
        '--oat-radius-medium':      '0.75rem',
      },
    }),
  ],
};

3 — Switch themes at runtime

Inject NgOatThemeRef and call setTokens() whenever you want:

// my-settings.component.ts
import { NgOatThemeRef } from '@letsprogram/ng-oat';

export class SettingsComponent {
  private theme = inject(NgOatThemeRef);

  applyBrand() {
    this.theme.setTokens({
      '--oat-primary':            '#0ea5e9',
      '--oat-primary-foreground': '#ffffff',
      '--oat-background':         'light-dark(#f8fafc, #0f172a)',
      '--oat-foreground':         'light-dark(#0f172a, #f1f5f9)',
      '--oat-border':             'light-dark(#cbd5e1, #334155)',
    });
  }

  reset() {
    this.theme.resetTokens();
  }
}

4 — Scope tokens to a section

Apply tokens to a specific container instead of :root:

provideNgOatTheme({
  tokens: { '--oat-primary': '#e11d48' },
  scope: '#admin-panel',          // CSS selector
})

// Or change scope at runtime:
this.theme.setScope('#admin-panel');

5 — Support light-dark() for both modes

Use light-dark(lightValue, darkValue) to ensure your theme works in both color schemes:

this.theme.setTokens({
  '--oat-primary':     'light-dark(#2563eb, #60a5fa)',
  '--oat-background':  'light-dark(#ffffff, #0c0a09)',
  '--oat-foreground':  'light-dark(#1c1917, #fafaf9)',
  '--oat-card':        'light-dark(#ffffff, #1c1917)',
  '--oat-border':      'light-dark(#d6d3d1, #44403c)',
});