Skip to main content

useThemeSwitcher

Location: src/hooks/useThemeSwitcher.js

Overview​

A development/preference hook for switching between experimental visual themes. Applies a CSS class to the document root element (<html>) and persists the user's choice to localStorage under the key commonplace-experimental-theme.

Available themes: default, neon, forest, circus. Each maps to a corresponding CSS class (theme-default, theme-neon, etc.).

Signature​

function useThemeSwitcher(): {
  currentTheme: string,
  setTheme: (theme: string) => void,
  cycleTheme: () => void,
  availableThemes: string[]
}

Parameters​

None.

Return Value​

PropertyTypeDescription
currentThemestringThe currently active theme key (e.g. "default", "neon").
setTheme(theme: string) => voidSet a specific theme by key. Updates the DOM class and persists to localStorage.
cycleTheme() => voidCycle to the next theme in the list. Wraps around from the last theme back to the first.
availableThemesstring[]Array of all available theme keys: ["default", "neon", "forest", "circus"].

Usage​

function ThemeToggle() {
  const { currentTheme, cycleTheme, availableThemes } = useThemeSwitcher();

  return (
    <button onClick={cycleTheme}>
      Theme: {currentTheme}
    </button>
  );
}

Setting a specific theme​

function ThemeSelector() {
  const { currentTheme, setTheme, availableThemes } = useThemeSwitcher();

  return (
    <select value={currentTheme} onChange={(e) => setTheme(e.target.value)}>
      {availableThemes.map(theme => (
        <option key={theme} value={theme}>{theme}</option>
      ))}
    </select>
  );
}

Last updated: 2026-02-07