useThemeContext

The useThemeContext hook allows you to access or modify the theme and mode properties of the Cerberus Design System in multiple components.

When to use

This hook is ideal for when you need to access or modify the theme or mode properties of the Cerberus Design System in multiple components.

Usage

To use the useThemeContext hook, you need to wrap the component using the hook with the Cerberus ThemeProvider component.

1
import { ThemeProvider, useThemeContext } from '@cerberus-design/react'
2

3
function Nav() {
4
  const { theme, mode, udpateTheme, updateMode } = useThemeContext()
5

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

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

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

1
import { ThemeProvider, useThemeContext } from '@cerberus-design/react'
2

3
function Header() {
4
  const { mode } = useThemeContext()
5

6
  return (
7
    <h1>
8
      {mode === 'light' ? 'Hey, friend!' : 'I wear my sunglasses at night.'}
9
    </h1>
10
  )
11
}

1
import { ThemeProvider } from '@cerberus-design/react'
2
import Header from './header'
3
import Nav from './nav'
4

5
function Layout() {
6
  return (
7
    <ThemeProvider>
8
      <Nav />
9
      <Header />
10
    </ThemeProvider>
11
  )
12
}

When not to use

When you need to access or modify the theme or mode proprties in a single component, consider using the `useTheme` hook instead.

API

type DefaultThemes = 'cerberus'
type ColorModes = 'light' | 'dark'

define function useThemeContext(
  defaultTheme: DefaultThemes = 'cerberus',
  defaultColorMode: ColorModes = 'light',
): {
  theme: DefaultThemes
  mode: ColorModes
  updateTheme: (theme: DefaultThemes) => void
  updateMode: (mode: ColorModes) => void
}

Arguments

The useThemeContext hook accepts the same arguments as the useTheme hook.