#useCssVar

A React Hook that allows you to use CSS variables in your components.

#Demo

Try to toggle dark mode or click button below to see the effect.

#Usage

See API for more details.

#Source

#API

const [variable, setVariable] = useCssVar(variableName, options, target)

#VariableName

string, The name of the CSS variable you want to use.

#Options

export type UseCssVarOptions = {
  /**
   * default value of the CSS variable
   *
   * @defaultValue ''
   */
  defaultValue?: string
  /**
   * whether to observe the changes of the CSS variable
   *
   * @defaultValue false
   */
  observe?: boolean
}

#ElementTarget

ElementTarget is a union type that represents various kinds of elements that can be targeted.

See ElementTarget or ElementTarget Types for more details.

() => document.documentElement by defaults.

#Returns

Same as React.useState, a tuple with the current value of the CSS variable and a function to update it.

export type UseCssVarReturns = readonly [string, ReactSetState<string>]