useTheme

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

Usage

1
import { useTheme } from '@cerberus/react'
2

3
type CustomizedThemes = 'party-town'
4

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

8
  function handleSetTheme(theme: string) {
9
    updateTheme('party-town')
10
  }
11

12
  function handleToggleMode() {
13
    updateMode((prev) => (prev === 'light' ? 'dark' : 'light'))
14
  }
15

16
  return (
17
    <nav>
18
      <button onClick={handleSetTheme} type="button">
19
        update theme to party-town
20
      </button>
21
      <button onClick={handleToggleMode} type="button">
22
        toggle mode
23
      </button>
24
    </nav>
25
  )
26
}

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:

Name	Default	Description
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:

Name	Default	Description
cache	`true`	Whether to cache the theme and mode in the local storage.
updateTheme		A custom function to call when the theme is updated.
updateMode		A custom function to call when the mode is updated.

Return

The useTheme hook returns an object with the following properties:

Name	Description
theme	The current theme of the Cerberus Design System.
mode	The current mode of the Cerberus Design System.
updateTheme	A function that allows you to update the theme of the Cerberus Design System.
updateMode	A function that allows you to update the mode of the Cerberus Design System.