useTheme

Access or modify the theme and mode properties of the Cerberus Design System.

useTheme

The useTheme hook allows you to access or modify the theme and mode properties of the Cerberus Design System.

Usage

nav.tsx
import { useTheme } from '@cerberus/react'


type CustomizedThemes = 'party-town'


function Nav() {
  const { theme, mode, updateTheme, updateMode } = useTheme<CustomizedThemes>()


  function handleSetTheme(theme: string) {
    updateTheme('party-town')
  }


  function handleToggleMode() {
    updateMode((prev) => (prev === 'light' ? 'dark' : 'light'))
  }


  return (
    <nav>
      <button onClick={handleSetTheme} type="button">
        update theme to party-town
      </button>
      <button onClick={handleToggleMode} type="button">
        toggle mode
      </button>
    </nav>
  )
}

API

export type DefaultThemes = 'cerberus' | 'acheron'
export type CustomThemes<K extends string = DefaultThemes> = 'cerberus' | K
export type ColorModes = 'light' | 'dark' | 'system'


export interface UseThemOptions {
  defaultTheme?: CustomThemes
  defaultMode?: ColorModes
  options?: {
    cache?: boolean
    updateMode?: (mode: ColorModes) => void
    updateTheme?: (theme: CustomThemes) => void
  }
}


define function useTheme<C extends string = DefaultThemes>(
  defaultTheme: CustomThemes<C> = 'cerberus',
  defaultColorMode: ColorModes = 'light',
  options?: UseThemOptions = {}
): {
  theme: CustomThemes<C>
  mode: ColorModes
  updateTheme: (theme: CustomThemes<C>) => void
  updateMode: (mode: ColorModes) => void
}

Arguments

The useTheme accepts the following optional arguments:

NameDefaultDescription
defaultTheme'cerberus'The default theme of the Cerberus Design System.
defaultMode'light'The default mode of the Cerberus Design System.

Options

The useTheme hook accepts an optional options object with the following properties:

NameDefaultDescription
cachetrueWhether to cache the theme and mode in the local storage.
updateThemeA custom function to call when the theme is updated.
updateModeA custom function to call when the mode is updated.

Return

The useTheme hook returns an object with the following properties:

NameDescription
themeThe current theme of the Cerberus Design System.
modeThe current mode of the Cerberus Design System.
updateThemeA function that allows you to update the theme of the Cerberus Design System.
updateModeA function that allows you to update the mode of the Cerberus Design System.

On this page