useThemeContext

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

useThemeContext

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

Client 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/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/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/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
}

Server Usage

If you are using NextJS, you can utilize cookies to store the theme and mode properties. This way, the user's theme and mode preferences persist between page loads.

1
import { type PropsWithChildren } from 'react'
2
import {
3
  ThemeProvider,
4
  type ColorModes,
5
  type DefaultThemes,
6
} from '@cerberus/react'
7
import { getTheme, injectTheme, type ThemeName } from 'styled-system/themes'
8
import { Nav } from './components/Nav'
9
import { getCookie, setCookie } from './actions/cookies'
10

11
import './globals.css'
12

13
interface RootProps {}
14

15
export default async function RootLayout(props: PropsWithChildren<RootProps>) {
16
  const themeName = (await getCookie('theme')) as ThemeName
17
  const theme = themeName && (await getTheme(themeName))
18
  const colorModeName = (await getCookie('colorMode')) as ColorModes | undefined
19

20
  const handleUpdateTheme = async (theme: DefaultThemes) => {
21
    'use server'
22
    const newTheme = await getTheme(theme as ThemeName)
23
    setCookie('theme', newTheme)
24
    injectTheme(document.documentElement, newTheme)
25
  }
26

27
  const handleUpdateMode = async (mode: ColorModes) => {
28
    'use server'
29
    setCookie('colorMode', mode)
30
  }
31

32
  return (
33
    <html
34
      lang="en"
35
      data-panda-theme={themeName || 'cerberus'}
36
      data-color-mode={colorModeName || 'system'}
37
    >
38
      {themeName && (
39
        <head>
40
          <style
41
            type="text/css"
42
            id={theme.id}
43
            dangerouslySetInnerHTML={{ __html: theme.css }}
44
          />
45
        </head>
46
      )}
47

48
      <body>
49
        <ThemeProvider
50
          defaultTheme={themeName || 'cerberus'}
51
          defaultColorMode={colorModeName || 'system'}
52
          updateTheme={handleUpdateTheme}
53
          updateMode={handleUpdateMode}
54
        >
55
          <Nav />
56
          {props.children}
57
        </ThemeProvider>
58
      </body>
59
    </html>
60
  )
61
}

1
'use client';
2

3
export function Nav() {
4
  const pathname = usePathname()
5
  const { mode, updateMode } = useThemeContext()
6
  const ariaLabel = useMemo(() => {
7
    return mode === 'light' ? 'Switch to dark mode' : 'Switch to light mode'
8
  }, [mode])
9

10
  const handleUpdateMode = useCallback((e: MouseEvent<HTMLButtonElement>) => {
11
    const currentMode = e.currentTarget.value as ColorModes
12
    const newMode = getColorMode(currentMode)
13
    updateMode(newMode)
14
  }, [])
15

16
  return (
17
    <nav>
18
      <button
19
        onClick={handleUpdateMode}
20
        value={mode}
21
        aria-label={ariaLabel}
22
        type="button"
23
        value={mode}
24
      >
25
        {mode}
26
      </button>
27
    </nav>
28
  )
29
})

API

The useThemeContext does not accept any arguments. Instead, everything is passed as props to the ThemeProvider component.

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

export interface ThemeContextValue<T extends string = DefaultThemes> {
  theme: CustomThemes<T>
  mode: ColorModes
  updateTheme: (theme: T) => void
  updateMode: (mode: ColorModes) => void
}

export interface ThemeProviderProps extends UseThemeOptions {
  defaultTheme?: DefaultThemes
  defaultColorMode?: ColorModes
}

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

On this page