useAppTheme

The hook behind ThemeProvider, without a context.

const { activeTheme, themeMode, setThemeMode, toggleTheme } = useAppTheme({ storageKey, favicon = true, faviconTitle, allowSystem, defaultTheme })

The hook behind ThemeProvider. Use it directly when you want the same behavior without a context provider, for example in a single top-level component. Note that favicon defaults to true here (it is false on ThemeProvider).

import { ThemeContext, useAppTheme } from 'xedonium'

function Root({ children }) {
	const theme = useAppTheme({ storageKey: 'my-app-theme' })
	return <ThemeContext.Provider value={theme}>{children}</ThemeContext.Provider>
}

API

Parameters

  • storageKeystring
    Default: 'xedonium-theme-override'

    Where the user's choice is stored.

  • faviconboolean
    Default: true

    Set the fan favicon for the active theme.

  • faviconTitlestring
    Default: ''

    Title embedded in the favicon SVG.

  • allowSystemboolean
    Default: false

    Offer a system mode that follows the device theme.

  • defaultTheme'light' | 'dark' | 'system'
    Default: 'system'

    The theme used until the user chooses one.

Returns

  • activeTheme'light' | 'dark'

    The theme in effect.

  • themeMode'light' | 'dark' | 'system'
    Default: 'system'

    The user's choice.

  • setThemeMode(mode: 'light' | 'dark' | 'system') => void

    Choose a mode.

  • allowSystemboolean
    Default: false

    Echoes the option.

  • toggleTheme() => void

    Switch to the other theme, or to the next mode with allowSystem.