fn
useColorMode
v0.0.15testeddemoReactive color mode (`light` / `dark` / `auto`) with system detection, storage persistence, and automatic application of a class or attribute to a target element.
Examples
ts
const mode = useColorMode();
mode.value = 'dark';ts
// Custom modes and a data attribute
const mode = useColorMode({
attribute: 'data-theme',
modes: { dim: 'dim', cafe: 'cafe' },
});ts
// Read the resolved system + effective state
const { system, state } = useColorMode();Demo
Loading demo…
Signature
ts
export function useColorMode<T extends string = BasicColorMode>(
options: UseColorModeOptions<T> ={ ... }Type Parameters
Textends string= BasicColorModeParameters
| Parameter | Type | Description |
|---|---|---|
options? | UseColorModeOptions<T> | Options |
Returns
UseColorModeReturn<T>A writable ref of the mode, augmented with `{ store, system, state }`