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.