useCSSVariables

function useCSSVariables<Name extends CSSVariableName>(
  variables: ReadonlyCSSVariableList<Name>,
  rootNode?: RefObject<HTMLElement> | HTMLElement
): CSSVariablesProperties<Name> | undefined;

The useCSSVariables hook can be used to dynamically set CSS Variables (custom properties) on the root <html> or other elements.

Example Usage

import { purple500 } from "@react-md/core/theme/colors";
import { useCSSVariables } from "@react-md/core/theme/useCSSVariables";
import { contrastColor } from "@react-md/core/theme/utils";
import { useMemo } from "react";

function Example() {
  // Note: You should use `useMemo` so that the custom variables are not
  // added and removed during each render.
  useCSSVariables(
    useMemo(() => {
      return [
        {
          name: "--rmd-primary-color",
          value: purple500,
        },
        {
          name: "--rmd-on-primary-color",
          value: contrastColor(purple500),
        },
      ];
    }, [])
  );

  return null;
}

Parameters

variables - A list of { name: string; value: string | number; } to define. The hook will do nothing if this is an empty list.
rootNode - One of:
- undefined | false - Applies the custom properties to the root document.documentElement
- RefObject<HTMLElement> | HTMLElement - Applies the custom properties to that element

Returns

Nothing.