Theming

spectre-ui uses CSS custom properties (variables) for theming. This makes it easy to switch between themes at runtime, create custom themes, and integrate with any CSS framework.

Built-in Themes

• Cyber Dark (default) — Dark background (#020617), cyan primary (#0ea5e9)
• Cyber Light — Light background (#f8fafc), blue primary (#0284c7)

Theme Provider

import { SpectreThemeProvider } from "@spectre-ui/core";

function App() {
  return (
    <SpectreThemeProvider
      defaultTheme="dark"   // "dark" | "light"
      storageKey="my-theme" // localStorage key
      useSystemTheme={true} // follow OS preference
    >
      {children}
    </SpectreThemeProvider>
  );
}

Using the Theme Hook

import { useSpectreTheme } from "@spectre-ui/core";

function ThemeToggle() {
  const { theme, setTheme, toggleTheme } = useSpectreTheme();
  return (
    <button onClick={toggleTheme}>
      Current: {theme}
    </button>
  );
}

CSS Variables

All design tokens are exposed as CSS custom properties:

/* Colors */
--spectre-background
--spectre-foreground
--spectre-primary
--spectre-primary-foreground
--spectre-secondary
--spectre-secondary-foreground
--spectre-muted
--spectre-muted-foreground
--spectre-accent
--spectre-accent-foreground
--spectre-border
--spectre-input
--spectre-ring
--spectre-success
--spectre-warning
--spectre-destructive

/* Typography */
--spectre-font-sans
--spectre-font-mono

/* Glow Effects */
--spectre-glow-sm
--spectre-glow-md
--spectre-glow-lg

Custom Themes

Pass custom tokens to override any design token per-theme:

<SpectreThemeProvider
  customTokens={{
    dark: {
      primary: "#22c55e",       // Green instead of cyan
      background: "#0a0a0a",    // Darker background
    },
    light: {
      primary: "#16a34a",
      background: "#ffffff",
    },
  }}
>
  {children}
</SpectreThemeProvider>

Design Principles

• 0px border-radius everywhere (non-configurable, core to the aesthetic)
• Monospace-first typography (Geist Mono / JetBrains Mono)
• Uppercase tracking for labels and headings
• Cyan glow effects on interactive elements
• HUD corner brackets on cards and containers