Passing in any value to the theme prop wil result in a class name added to the html tag of your application to manage your theme. Handles any theme name or value and as many theme options you may want to provide.

Import the ThemeProvider component as a parent to the application you want to wrap:

<ThemeProvider>{children}</ThemeProvider>

Storing a Theme

By default the Theme Provider will set a cookie for you out of the box. All that is required is that the application provides the correct theme value to load to support SSR. The application will have to manage the cookie and provide it.

Next.js example below:

export default function RootLayout({ children }: { children: ReactNode }) {
  const cookieStore = cookies()
  const theme = cookieStore.get('theme')

  return (
    <html lang="en" className="h-full" suppressHydrationWarning>
      <body>
        <ThemeProvider theme={theme?.value ?? 'system'}>
          {children}
        </ThemeProvider>
      </body>
    </html>
  )
}

Optional Theme Toggle

You can create a theme toggle to allow the user to toggle between theme settings.

export function ThemeSwitcher() {
  const { theme, setTheme } = useTheme()

  return (
    <div className="flex items-center gap-1">
      <IconButton
        disabled={theme === 'system'}
        onClick={() => setTheme('system')}
      >
        <DesktopIcon />
      </IconButton>
      <IconButton
        disabled={theme === 'light'}
        onClick={() => {
          setTheme('light')
        }}
      >
        <SunIcon />
      </IconButton>
      <IconButton disabled={theme === 'dark'} onClick={() => setTheme('dark')}>
        <MoonIcon />
      </IconButton>
    </div>
  )
}

Prop options

Out of the box Theme Handler defaults to the users preference. Internally it is referenced as system.

component props:

children - ReactNode - Required The child nodes that are wrapped by the ThemeProvider.
theme - string - Optional Default is system if you want user preferences to decide between a class named light or dark provide system.
setStoredTheme - (storageKey: string, theme: string) => void - Optional The callback function that set updates the theme value if changed on the client.
storedKey - string - Optional The key name of the stored theme value. Defaults to theme.

Future Support

Multiple themes on a page
Data attribute option instead of class name

FAQs

What is theme-handler?

Is theme-handler popular?

Is theme-handler well maintained?

Package last updated on 26 Aug 2024

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install