print :root var()’s

This script dynamically extracts and logs all CSS-variables from :root
🚀 Now you can easily inspect all vars.

const getCSSVariables = (): void => {
  const styles = getComputedStyle(document.documentElement);
  const vars: Record<string, string> = {};
  
  for (let i = 0; i < styles.length; i++) {
    const key = styles[i];
    if (key?.startsWith("--")) {
      vars[key] = styles.getPropertyValue(key).trim();
    }
  }
  
  console.log("✅ CSS Variables:", vars);
  console.table(vars);
};

const getCSSVariables = (): void => {
  const styles = getComputedStyle(document.documentElement);
  const vars: Record<string, string> = {};
  
  for (let i = 0; i < styles.length; i++) {
    const key = styles[i];
    if (key?.startsWith("--")) {
      vars[key] = styles.getPropertyValue(key).trim();
    }
  }
  
  console.log("✅ CSS Variables:", vars);
  console.table(vars);
};

For example :

Index	Value
–alert-error –alert-info –alert-success –alert-warning –bg-dark –bg-full-secondary –bg-light –bg-neutral –black-0	“#FF0000” “#8092AA” “#00C851” “#FCB424” “#b3becc” “#002554” “#f2f4f6” “#e6eaee” “rgba(0, 0, 0, 0)”