@laserware/dominator
    Preparing search index...

    Function setCssVars

    • 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>