Theming

Light and dark mode via CSS variables. No gradients, no glassmorphism — just clean neutrals.

CSS variables

Override these variables in your global CSS to match your brand:

css

:root {
  --background: #ffffff;
  --foreground: #171717;
  --muted: #f5f5f5;
  --muted-foreground: #737373;
  --border: #e5e5e5;
  --ring: #171717;
}

.dark {
  --background: #0a0a0a;
  --foreground: #fafafa;
  --muted: #171717;
  --muted-foreground: #a3a3a3;
  --border: #262626;
  --ring: #fafafa;
}

Dark mode

This site uses next-themes with a class strategy. Crumbie components inherit tokens from the active theme automatically.