useTheme

Access and control the current color mode and active palette. Must be used within a ThemeProvider.

Setup

Wrap your app with ThemeProvider before using this hook anywhere in the tree:

import { ThemeProvider, builtInPalettes } from "@bloomkit/react";
 
export default function App({ children }: { children: React.ReactNode }) {
  return (
    <ThemeProvider
      defaultColorMode="system"
      defaultPalette="bloom"
      palettes={builtInPalettes}
    >
      {children}
    </ThemeProvider>
  );
}

Return value

Property	Type	Description
`colorMode`	`"light" \| "dark" \| "system"`	Current color mode setting
`resolvedMode`	`"light" \| "dark"`	Resolved value after applying system preference
`setColorMode`	`(mode) => void`	Set to `"dark"`, `"light"`, or `"system"`
`toggleColorMode`	`() => void`	Toggle between light and dark
`palette`	`string`	Active palette name
`setPalette`	`(name) => void`	Switch to a palette by name
`palettes`	`string[]`	All available palette names

resolvedMode is always "light" or "dark" — it never returns "system". Use it to render icons or labels safely.

Dark mode toggle

import { useTheme } from "@bloomkit/react";
 
export function ThemeToggle() {
  const { resolvedMode, toggleColorMode } = useTheme();
 
  return (
    <button
      onClick={toggleColorMode}
      aria-label={resolvedMode === "dark" ? "Switch to light mode" : "Switch to dark mode"}
    >
      {resolvedMode === "dark" ? "Light mode" : "Dark mode"}
    </button>
  );
}

For a three-way picker (light / dark / system), use colorMode and setColorMode instead:

import { useTheme } from "@bloomkit/react";
 
const modes = ["light", "dark", "system"] as const;
 
export function ColorModePicker() {
  const { colorMode, setColorMode } = useTheme();
 
  return (
    <div role="group" aria-label="Color mode">
      {modes.map((mode) => (
        <button
          key={mode}
          onClick={() => setColorMode(mode)}
          aria-pressed={colorMode === mode}
        >
          {mode}
        </button>
      ))}
    </div>
  );
}

Palette switcher

import { useTheme } from "@bloomkit/react";
 
export function PaletteSwitcher() {
  const { palette, setPalette, palettes } = useTheme();
 
  return (
    <div>
      {palettes.map((name) => (
        <button
          key={name}
          onClick={() => setPalette(name)}
          aria-pressed={palette === name}
        >
          {name}
        </button>
      ))}
    </div>
  );
}

ThemeProvider props

Prop	Type	Default	Description
`defaultColorMode`	`"light" \| "dark" \| "system"`	`"system"`	Initial color mode
`defaultPalette`	`string`	`"bloom"`	Initial palette name
`palettes`	`BloomPalette[]`	`[]`	Palette definitions to register
`storageKey`	`string`	`"bloom-theme"`	localStorage key prefix for persistence
`children`	`ReactNode`	—	App content

The selected color mode and palette are persisted to localStorage so the user's preference is restored on the next visit.