How to Get All Custom Properties on a Page in JavaScript

This article describes how to use JavaScript to get CSS custom property values ​​and build an automatically generated palette example. We know that you can use getComputedStyle and getPropertyValue to access a single custom property, but if there are multiple properties, you will need to write a lot of duplicate code. This article will show how to automate this process.

Suppose we have declared multiple custom properties on the HTML element:

 html {
  --color-accent: #00eb9b;
  --color-accent-secondary: #9db4ff;
  --color-accent-tertiary: #f2c0ea;
  --color-text: #292929;
  --color-divider: #d7d7d7;
}

We can automatically get all custom properties and generate a palette through the following steps:

1. Get all stylesheets: Use document.styleSheets to get all stylesheets (inner and outer) on the page.

2. Filter third-party stylesheets: For security reasons, only stylesheets on the current domain are processed. We use the isSameDomain function to filter out third-party stylesheets:

    const isSameDomain = (styleSheet) => {
     if (!styleSheet.href) return true;
     return styleSheet.href.indexOf(window.location.origin) === 0;
   };

3. Get all style rules: Use reduce and concat methods to merge all style rules into an array.

4. Filter non-base style rules: only rules of type CSSStyleRule are retained, and other types of rules (such as CSSMediaRule ). Use the isStyleRule function to filter:

    const isStyleRule = (rule) => rule.type === 1;

5. Get the names and values ​​of all attributes: Iterate through the style attribute ( CSSStyleDeclaration object) of each style rule, and use map method to get the names and values ​​of all attributes.

6. Filter non-custom attributes: Only custom attributes starting with -- are preserved. Use filter method to filter.

7. Generate HTML: Use the reduce method to generate HTML code based on the obtained custom attributes and values, and use it to display the color palette. We use<div> Elements are used as color samples and set colors using inline styles. External CSS uses <code>var(--color) to set the background color.

   The final code will be similar to the following structure (see the original text for specific implementation details):

    const getCSSCustomPropIndex = () => [...document.styleSheets]
     .filter(isSameDomain)
     .reduce((finalArr, sheet) => finalArr.concat(
       [...sheet.cssRules]
         .filter(isStyleRule)
         .reduce((propValArr, rule) => {
           const props = [...rule.style]
             .map((propName) => [propName.trim(), rule.style.getPropertyValue(propName).trim()])
             .filter(([propName]) => propName.indexOf("--") === 0);
           return [...propValArr, ...props];
         }, [])
     ), []);
   
   const cssCustomPropIndex = getCSSCustomPropIndex();
   document.querySelector(".colors").innerHTML = cssCustomPropIndex.reduce(
     (str, [prop, val]) => `${str}<div class="color__swatch" style="--color: ${val};"></div> `, "");

   This method automatically generates a color palette that displays all CSS custom properties without having to write a lot of code manually. In the future, you can use the CSSStyleRule.styleMap property in CSS Typed Object Model Level 1 draft to simplify the code.