This script dynamically extracts and logs all CSS-variables from :root
🚀 Now you can easily inspect all vars.
useEffect(() => {
setTimeout(() => {
const styles = getComputedStyle(document.documentElement);
const vars: Record<string, string> = {};
for (let i = 0; i < styles.length; i++) {
const key = styles[i];
if (key) {
if (key.startsWith("--")) {
vars[key] = styles.getPropertyValue(key).trim();
}
}
}
console.log("✅ CSS Variables:", vars);
console.table(vars);
}, 500);
}, []);
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)” |