useTheme

Tracks light, dark, and system theme modes.

Import

import { useTheme } from '@kamod-ch/hooks'

Live demo

Basic demo

Tracks light, dark, and system theme modes.

Browser-only demo

This demo starts after the page mounts in the browser.

import { useTheme } from '@kamod-ch/hooks'

export default function UseThemeDemo() {
  const { theme, themeMode, setThemeMode } = useTheme({ localStorageKey: 'kamod-hooks-demo-theme' })

  return (
    <div>
      <p><strong>Resolved theme:</strong> {theme}</p>
      <p><strong>Mode:</strong> {themeMode}</p>
      <div class="demo-actions">
        <button type="button" onClick={() => setThemeMode('light')}>Light</button>
        <button type="button" onClick={() => setThemeMode('dark')}>Dark</button>
        <button type="button" onClick={() => setThemeMode('system')}>System</button>
      </div>
    </div>
  )
}

API

TypeScript signature

export declare enum ThemeMode {
    LIGHT = "light",
    DARK = "dark",
    SYSTEM = "system"
}
export type ThemeModeType = `${ThemeMode}`;
export type ThemeType = 'light' | 'dark';
type Options = {
    localStorageKey?: string;
};
export default function useTheme(options?: Options): {
    theme: ThemeType;
    themeMode: "light" | "dark" | "system";
    setThemeMode: (this: unknown, mode: "light" | "dark" | "system") => void;
};
export {};
/

SSR considerations

This hook touches browser APIs. Render it after mount or guard it with BrowserOnly in SSR and static builds.

Browser compatibility

Requires the corresponding browser API to exist in the current environment.

Related hooks

useResponsive