Five built-in themes with CSS custom properties and a three-tier token architecture.

Eddie supports multiple themes via CSS classes on the <html> element. Each theme remaps semantic (Tier 2) tokens to different primitive (Tier 1) values.

Available Themes

Theme Class Description
BFW bfw Default light theme for Brad Frost Web
BFW Dark bfw-dark Dark variant of BFW
BFW V9 bfw-v9 Legacy version 9 styling
Wowee Zowee wowee-zowee Playful, colorful theme
We Are Here we-are-here Theme for the we are here. community

Applying a Theme

Add the theme class to your <html> element:

<html class="bfw-dark">

Import the corresponding token CSS and fonts:

import '@brad-frost-web/eddie-design-tokens/bfw-dark/scss/fonts.scss'; import '@brad-frost-web/eddie-design-tokens/bfw-dark/build/css/tokens.css';

Three-Tier Architecture

Tier 1 — Definitions (Primitives)

Raw color values, font stacks, and spacing units. Never referenced directly in components.

Tier 2 — Usage (Semantic)

Purpose-driven tokens that map primitives to contexts: --ed-theme-color-background-default, --ed-theme-color-content-accent-1.

Tier 3 — Component

Component-specific overrides: --ed-c-button-background. These allow per-component customization without affecting other components.

Accent Colors

Each theme provides 8 accent colors with two contrast variants:

  • accent-N — The accent color itself (use for text/borders ON default backgrounds)
  • on-accent-N — Contrasting color for text/borders ON accent backgrounds

This ensures accessibility regardless of theme.

Creating a Custom Theme

  1. Create a new token directory in packages/eddie-design-tokens/
  2. Define Tier 1 primitives
  3. Map Tier 2 semantic tokens to your primitives
  4. Add a CSS class matching your theme name
  5. Build: npm run eddie-design-tokens:build

Full Theming Documentation

The complete theming guide is maintained in the monorepo's docs/THEMING.md and rendered in Storybook:

Read Theming Docs in Storybook →