useCssVar

v0.0.14testeddemo

Read and write a CSS custom property on an element as a reactive ref. Defaults to document.documentElement. Set observe to react to external changes via a MutationObserver.

Source Tests

Examples

const color = useCssVar('--color', el);
color.value = 'red';

const theme = useCssVar('--theme', null, { initialValue: 'light', observe: true });

Demo

Loading demo…

Signature

export function useCssVar(
  prop: MaybeRefOrGetter<string | null | undefined>,
  target?: MaybeComputedElementRef,
  options: UseCssVarOptions ={ ... }

Parameters

Parameter	Type	Default	Description
`prop`	`MaybeRefOrGetter<string \| null \| undefined>`	—	The CSS variable name (e.g. `--color`)
`target`?	`MaybeComputedElementRef`	—	Element to read/write the variable on (defaults to `documentElement`)
`options`?	`UseCssVarOptions`	`{}`	`initialValue`, `observe`, and a configurable `window`

Returns

UseCssVarReturnA writable ref; reading returns the current value, writing updates the property