Appearance
useColorMode
Category
Export Size
2.22 kB
Last Changed
5 days ago
Related
Reactive color mode (dark / light / customs) with auto data persistence.
Demo
Basic Usage
tsx
import { useColorMode } from '@reause/core'
const [mode, setMode] = useColorMode()By default, it will match with users' browser preference using usePreferredDark (a.k.a auto mode). When reading the state, it will by default return the current color mode (dark, light or your custom modes). The auto mode can be included in the returned modes by enabling the emitAuto option. When writing to the state, it will trigger DOM updates and persist the color mode to local storage (or your custom storage). You can pass auto to set back to auto mode.
tsx
mode // 'dark' | 'light'
setMode('dark') // change to dark mode and persist
setMode('auto') // change to auto modeConfig
tsx
import { useColorMode } from '@reause/core'
const [mode, setMode] = useColorMode({
attribute: 'theme',
modes: {
// custom colors
dim: 'dim',
cafe: 'cafe',
},
}) // 'dark' | 'light' | 'dim' | 'cafe'Advanced Usage
You can also explicit access to the system preference and storaged user override mode — in React the storage key holds the raw (possibly auto) choice and usePreferredDark reports the system preference:
tsx
import { useColorMode, usePreferredDark, useStorage } from '@reause/core'
const [mode, setMode] = useColorMode()
const [store] = useStorage('vueuse-color-scheme', 'auto') // 'dark' | 'light' | 'auto'
const isDark = usePreferredDark() // system preferenceComponent Usage
Not ported — upstream ships a UseColorMode component (Vue, render-slot based); in React the hook is used directly.
Type Declarations
Toggle
ts
export type BasicColorMode = 'light' | 'dark'
export type BasicColorSchema = BasicColorMode | 'auto'
export interface UseColorModeOptions<T extends string = BasicColorMode> extends UseStorageOptions<T | BasicColorMode> {
selector?: string | RefObject<HTMLElement | null>;
attribute?: string;
initialValue?: T | BasicColorSchema;
modes?: Partial<Record<T | BasicColorSchema, string>>;
onChanged?: (mode: T | BasicColorMode, defaultHandler: ((mode: T | BasicColorMode) => void)) => void;
storageRef?: RefObject<T | BasicColorSchema>;
storageKey?: string | null;
storage?: StorageLike;
emitAuto?: boolean;
disableTransition?: boolean;
}
export type UseColorModeReturn<T extends string = BasicColorMode> = [
mode: T | BasicColorSchema,
setMode: (mode: T | BasicColorSchema) => void
]
export interface UseStorageOptions<T> {
window?: Window;
listenToStorageChanges?: boolean;
writeDefaults?: boolean;
mergeDefaults?: boolean | ((storageValue: T, defaults: T) => T);
serializer?: Serializer<T>;
onError?: (error: unknown) => void;
}
export interface StorageLike {
getItem: (key: string) => string | null;
setItem: (key: string, value: string) => void;
removeItem: (key: string) => void;
}
export function useColorMode<T extends string = BasicColorMode>(options?: UseColorModeOptions<T>): UseColorModeReturn<T>
export function useStorage(key: string, defaults: string, storage?: StorageLike, options?: UseStorageOptions<string>): UseStorageReturn<string>
export function useStorage(key: string, defaults: boolean, storage?: StorageLike, options?: UseStorageOptions<boolean>): UseStorageReturn<boolean>
export function useStorage(key: string, defaults: number, storage?: StorageLike, options?: UseStorageOptions<number>): UseStorageReturn<number>
export function useStorage<T>(key: string, defaults: T | (() => T), storage?: StorageLike, options?: UseStorageOptions<T>): UseStorageReturn<T>
export function useStorage<T = unknown>(key: string, defaults: null, storage?: StorageLike, options?: UseStorageOptions<T>): UseStorageReturn<T>Source
Contributors
