useTheme

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

When to use

This hook is ideal for when you need a 'one shot' access or modify the theme or mode properties of the Cerberus Design System.

Usage

1
import { useTheme } from '@cerberus-design/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
}

When not to use

When you need to access or modify the theme or mode proprties in multiple components, consider using the ThemeProvider family instead.

API

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

define function useTheme<C extends string = DefaultThemes>(
  defaultTheme: CustomThemes<C> = 'cerberus',
  defaultColorMode: ColorModes = 'light',
): {
  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.

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.