@motioneffector/theme

@motioneffector/theme bridges your design tokens and CSS custom properties, enabling instant theme switching without page reloads or class juggling. Define your themes once as JavaScript objects, and the library handles injecting CSS variables, persisting user preferences, and responding to system dark mode—all with zero dependencies and full TypeScript support.

I want to...

Key Concepts

Themes

A theme is a named collection of design tokens—key-value pairs that define colors, spacing, typography, or any CSS value. You create themes with createTheme() and switch between them at runtime.

Theme Manager

The theme manager is the central controller. It holds your themes, tracks which one is active, injects CSS variables into the DOM, and optionally persists the user's choice to localStorage.

Design Tokens

Tokens are the individual values within a theme. Define them in camelCase (primaryColor) and they automatically become kebab-case CSS variables (--color-primary-color).

Quick Example

import { createTheme, createThemeManager } from '@motioneffector/theme'

// Define themes
const light = createTheme({
  name: 'light',
  tokens: {
    background: '#ffffff',
    text: '#1a1a1a',
    primary: '#007bff'
  }
})

const dark = createTheme({
  name: 'dark',
  tokens: {
    background: '#1a1a1a',
    text: '#ffffff',
    primary: '#0d6efd'
  }
})

// Create manager
const manager = createThemeManager({
  themes: [light, dark],
  defaultTheme: 'light',
  storageKey: 'app-theme'
})

// Switch themes
document.querySelector('#toggle').addEventListener('click', () => {
  const next = manager.currentName() === 'light' ? 'dark' : 'light'
  manager.apply(next)
})

Use the CSS variables in your styles:

body {
  background: var(--color-background);
  color: var(--color-text);
}

button {
  background: var(--color-primary);
}

Full API Reference →