Interface UseThemeResult

Return shape of useTheme. toggle is a two-way switch: it leaves system for the opposite of what is showing.

const { mode, resolved } = useTheme()
mode === 'system' ? `Auto (${resolved})` : mode // 'Auto (dark)' vs 'light'

interface UseThemeResult {
    mode: ThemeMode;
    resolved: ResolvedTheme;
    setMode: (mode: ThemeMode) => void;
    toggle: () => void;
}

Properties

setMode: (mode: ThemeMode) => void

toggle: () => void