Selection and preferences

useThemeToggle

Synchronizes a light or dark theme with the document, local storage, and the shared theme-change event, with an optional pointer-origin transition that respects reduced motion.

Copy React example ThemeToggle component

Live component preview · Astro

Explore ThemeToggle

Try the component this hook connects to. The preview uses the Astro adapter; the React example below uses useThemeToggle.

Change the site theme

React usage

Import from @santi020k/lumen-react and spread the controller props onto the matching components.

import { ThemeToggle, useThemeToggle } from '@santi020k/lumen-react'

export function ThemeControl() {
  const { theme, toggleTheme } = useThemeToggle()

  return (
    <ThemeToggle
      aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} theme`}
      onClick={toggleTheme}
    >
      {theme === 'dark' ? 'Light' : 'Dark'}
    </ThemeToggle>
  )
}

import { ThemeToggle, useThemeToggle } from '@santi020k/lumen-react'

export function ThemeControl() {
  const { theme, toggleTheme } = useThemeToggle()

  return (
    <ThemeToggle
      aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} theme`}
      onClick={toggleTheme}
    >
      {theme === 'dark' ? 'Light' : 'Dark'}
    </ThemeToggle>
  )
}

Load @santi020k/lumen-react/styles.css once in your application. With React Server Components, put 'use client' at the top of the module that calls the hook. Follow the React setup guide for the framework boundary.

Options

Property	Type	Default	Description
defaultTheme	string	"light"	Theme used when browser state is unavailable or has no saved value.

Controller return values

Property	Type	Description
theme	string	Current theme value.
setTheme	Dispatch<SetStateAction<string>>	Sets the current theme directly.
toggleTheme	(event?: MouseEvent<HTMLButtonElement>) => void	Switches between light and dark and optionally starts the transition from the invoking button.