Theme Provider and useTheme

The Newth theme is delivered through a React provider and a single stylesheet. Mount the provider at the root, import the stylesheet once, then use useTheme to read or change the mode from inside the tree.

Set up the provider

Wrap your app in the provider

Mount N3wthProvider at the root of your application. The default mode is dark; pass light or system to select another mode.

import { N3wthProvider } from '@n3wth/ui/site'

export function App({ children }) {
  return <N3wthProvider mode="dark">{children}</N3wthProvider>
}

Import the shared stylesheet once

Import @n3wth/ui/site.css at the app root. This supplies the generated theme, component, site, and visual styles.

import '@n3wth/ui/site.css'

Toggle the theme with useTheme

For an interactive app, keep the provider and toggle on the same state:

'use client'

import type { ReactNode } from 'react'
import { useTheme } from '@n3wth/ui'
import { N3wthProvider } from '@n3wth/ui/site'
import { Button } from '@n3wth/ui/primitives'

export function ThemeRoot({ children }: { children: ReactNode }) {
  const { theme, toggleTheme } = useTheme()

  return (
    <N3wthProvider mode={theme}>
      <Button
        label={theme === 'dark' ? 'Use light theme' : 'Use dark theme'}
        onClick={toggleTheme}
      />
      {children}
    </N3wthProvider>
  )
}

useTheme options

Option	Default	Meaning
`defaultTheme`	`dark`	Server-rendered value and fallback when there is no saved value or light-system preference
`storageKey`	`n3wth-theme`	Local-storage preference key
`attribute`	`data-theme`	Attribute written on the document root

The hook returns theme, setTheme, toggleTheme, isDark, and isLight. Calls that use the same storage key share theme updates.

Primitives

Choose between native Astryx controls and root compatibility adapters.

Tailwind

Wire the theme tokens into Tailwind v4.

Get Started

Theming

Components

Recipes

Reference

Theme Provider and useTheme

Set up the provider

Toggle the theme with useTheme

useTheme options

Primitives

Tailwind

​Set up the provider

​Toggle the theme with useTheme

​useTheme options

​Related

Primitives

Tailwind

Set up the provider

Toggle the theme with useTheme

useTheme options

Related