• Sets the CSS vars on the optionally specified target.

    If no target is specified, uses documentElement (i.e. :root).

    Type Parameters

    Parameters

    • vars: CssVars

      Object with key of CSS variable name and value of value to set for name.

    • Optionaltarget: null | Target = document.documentElement

      Optional Element, EventTarget, or CSS selector.

    Returns E

    Element representation of the specified target.

    The keys in the vars argument are not limited to type CssVarName because the key (i.e. CSS variable name) is checked prior to setting it on the property.

    InvalidCssVarError if a name in vars is not a valid CssVarName.

    elements!InvalidElementError if the specified target wasn't found.

    HTML (Before)

    <style>
    :root {
    --color-fg: green;
    }
    </style>

    <button id="example" style="--color-bg: blue;">
    Example
    </button>

    Set in Element

    const element = findElement("#example")!;

    setCssVars({ "--color-bg", "red" }, element);

    Set in :root

    setCssVars({ "--color-fg", "blue" });
    

    HTML (After)

    <style>
    :root {
    --color-fg: blue;
    }
    </style>

    <button id="example" style="--color-bg: red;">
    Example
    </button>