useTheme hook

Usage

Pando provides a useTheme hook to allow you to easily manage set and update the theme of your application. It also allows you to extend and customize themes to fit your needs.

Pando’s tokens require a parent theme of inkyBlue to access color tokens within the design system. It also has two color mode options built in: data-color-mode="dark" and data-color-mode="light" that you can use to toggle light and dark mode on Pando’s tokens. This hook automatically caches the theme to the localStorage Object so that your users will have it saved for as long as they keep the cache alive. 🎉

Examples

inkyBlue and useTheme()

If you use the useTheme() hook in your project, inkyBlue will be automatically set 🎉 so you should only need to use the updateTheme() function if you are using a custom theme in your project.

Reference

import { useTheme } from '@pluralsight/pando/react'

type Modes = 'light' | 'dark' | 'system'
type CustomModes<T extends string> = T | Modes

type Themes = 'inkyBlue'
type CustomThemes<T extends string> = T | Themes

interface ThemeProps {
  updateMode: (mode: string) => void,
  mode: CustomModes<T>,
  updateTheme: (theme: string) => void,
  theme: CustomThemes<T>,
}

useTheme<T extends string, M extends string>(
  initialTheme?: CustomThemes<T>,
  initialMode?: CustomModes<M>,
)

import type { CustomThemes, CustomModes } from '@pluralsight/react/types'

Parameters

initialMode, initialTheme: Optional string values of any of the CustomModes or CustomThemes offered or extended via Typescript.

Extending modes with Typescript

If you are a Typescript user and would like to extend the modes beyond the default options provided, pass in your modes as a type parameter.

import { useTheme, type Themes } from '@pluralsight/react'

type NewModes = 'discotheque' | 'count-chocula'

const { mode, updateMode } = useTheme<Themes, NewModes>()

Extending themes with Typescript

If you are a Typescript user and would like to extend the themes beyond the default options provided, pass in your themes as a type parameter.

import type { useTheme, type Modes } from '@pluralsight/react'

type NewThemes = 'large-font' | 'no-animation'

const { theme, updateTheme } = useTheme<NewThemes, Modes>()

Example usage in Component

Here is an example of how you might use useTheme to manage theme toggling between light and dark mode in an App component.

Because the useTheme hook is designed to update the localStorage Object, it should only be used on the client side.

function App() {
  const { mode, updateMode } = useTheme()

  function handleToggleMode() {
    const updated = mode === 'light' ? 'dark' : 'light'
    updateMode(updated)
  }

  return (
    <>
      <h2>Hello there!</h2>
      <p>This is an example with Mode toggling!</p>
      <button {...getButtonProps().button} onClick={handleToggleMode}>
        Toggle Mode
      </button>
    </>
  )
}

Check out useTheme in action

For another live example, take a look at !

Troubleshooting

My theme or mode is not changing when I update it

Make sure you are using a theme name that is either a Pando theme or one that has been defined in your global CSS styling. Otherwise the hook is updating values that are not mapping to any existing styles.

1. Make sure you have followed the Pando .
2. (To use Pando’s provided themes and modes) Make sure you are using the correct top level .
3. (If you are using a custom theme or mode) Make sure you have a theme defined in your CSS using .