Function getCssVars

  • getCssVars<V extends CssVars = CssVars>(
        names: KeysOf<V>,
        target?: null | Target,
    ): WithUndefinedValues<V>

  • Builds an object with the keys equal to the CSS variable names and the value equal to the corresponding variable value in the target.

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

    If the value is found it is coerced to a boolean if "true" or "false", a number if numeric, or the string value if a string. If not found, the value is excluded from the return value.

    Important

    You will need to perform checks for whether a value is undefined in the returned object if some of the entries weren't present. See the code block below for additional details.

    // Assuming you pass this in as the generic:
    type ShapeIn = {
      "--color-bg": string;
      "--gap": number;
    };

    // The return type of this function is:
    type ShapeOut = {
      "--color-bg": string | undefined;
      "--gap": number | undefined;
    };

    Type Parameters

    Parameters

    • names: KeysOf<V>

      Names of the variable to get value for.

    • Optionaltarget: null | Target = document.documentElement

      Optional Element, EventTarget, or CSS selector.

    Returns WithUndefinedValues<V>

    Object with names as keys and corresponding CSS variable values (or undefined if not present).

    Remarks

    The arcade!WithUndefinedValues type represents an object with values that could be undefined.

    Throws

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

    Example

    HTML

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

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

    Get from Element

    type Shape = {
      "--color-bg": string | undefined;
      "--gap": number | undefined;
    };

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

    getCssVars<Shape>(["--color-bg", "--gap"], element);
     // { "--color-bg": "blue", "--gap": 24 }

    Get from :root

    type Shape = {
      "--color-fg": string | undefined;
    };

    getCssVars<Shape>(["--color-fg"]);
     // { "--color-fg": "green" }

Settings

Member Visibility