Theming

How the design token system works and how to customize it.

Built-in Themes

NexusStratum ships with 7 built-in themes. Each provides a complete set of design tokens — colors, typography, spacing, radii, shadows, transitions, z-indices, and breakpoints.

Theme	Description	Primary Color
default	Clean neutral	Dark navy
slate	Cool slate grays	Slate blue
zinc	Warm zinc grays	Zinc dark
rose	Rose accent	Rose pink
blue	Blue accent	Blue
green	Green accent	Green
orange	Orange accent	Orange

Using a Theme

app.rs

use stratum_theme::Theme;

// Use a built-in theme
let theme = Theme::default();
let theme = Theme::rose();
let theme = Theme::blue();

Custom Themes

Start from any built-in theme and override specific tokens:

custom_theme.rs

use stratum_theme::{Theme, Hsl};

let custom = Theme::default()
    .with_primary(
        Hsl::new(262.0, 83.0, 58.0),  // light mode
        Hsl::new(262.0, 70.0, 68.0),  // dark mode
    )
    .with_font_sans("'Geist', sans-serif");

Available Builder Methods

Method	Description
with_primary(light, dark)	Override primary color
with_secondary(light, dark)	Override secondary color
with_accent(light, dark)	Override accent color
with_destructive(light, dark)	Override destructive color
with_radius(RadiiScale)	Override border radii
with_spacing(SpacingScale)	Override spacing scale
with_shadows(ShadowScale)	Override shadow scale
with_font_sans(str)	Override sans-serif font
with_font_serif(str)	Override serif font
with_font_mono(str)	Override monospace font

CSS Custom Properties

Themes generate CSS custom properties at build time. All component styles reference these variables, so changing the theme changes every component:

Generated CSS

:root {
  --stratum-color-background: 0 0% 100%;
  --stratum-color-primary: 222.2 47.4% 11.2%;
  --stratum-font-sans: 'Inter', sans-serif;
  --stratum-radius-md: 0.375rem;
  --stratum-spacing-4: 1rem;
  /* ... 50+ more variables */
}

Scoped Themes

Apply a different theme to a subtree by nesting providers:

scoped.rs

view! {
    <ThemeProvider theme=Theme::default()>
        <MainContent />
        // This subtree uses a different theme
        <ThemeProvider theme=Theme::rose()>
            <Sidebar />
        </ThemeProvider>
    </ThemeProvider>
}

Next: Dark Mode →