/// hooks

useTheme

Read and control the active theme and accent from the nearest PdsProvider. The hook throws if used outside a provider, so a theme toggle can rely on the context always being present.

Signature

useTheme

function useTheme(): {
  theme: "dark" | "light";
  setTheme: (next: Theme | ((prev: Theme) => Theme)) => void;
  accent: "green" | "blue" | "red" | "amber" | "violet";
  setAccent: (next: Accent | ((prev: Accent) => Accent)) => void;
  toggleTheme: () => void;
};

Returns

An object with the current values and their setters.

Field	Type	Description
`theme`	`"dark" \| "light"`	The active theme.
`setTheme`	`(next) => void`	Set the theme; accepts a value or an updater function.
`accent`	`Accent`	The active brand accent.
`setAccent`	`(next) => void`	Set the accent; accepts a value or an updater function.
`toggleTheme`	`() => void`	Convenience flip between dark and light.

When to use

Build a theme toggle or accent switcher in your app chrome.
Read the current theme to branch rendering — for example, to pick a theme-matched asset that CSS variables cannot express.
Anywhere you need the theme in React. To merely style for a theme, prefer the data-theme attribute and CSS variables — no hook required.

Example

a theme toggle

import { useTheme } from "@protocore/pds";

function ThemeToggle() {
  const { theme, toggleTheme } = useTheme();
  return (
    <button type="button" onClick={toggleTheme} aria-label="Toggle theme">
      {theme === "dark" ? "Light" : "Dark"}
    </button>
  );
}

Note

useTheme requires an ancestor <PdsProvider>. If you theme purely via data-* attributes on <html> and never read the theme in React, you do not need this hook — or the provider.