create list of all css variables

cssVars.js

// run after all styles load
const cssVars = {
    
    list : () => [...new Set([...[

        [...document.styleSheets]
        .map(s => [...s.cssRules]
        .map(r => r.cssText)),

        [...document.querySelectorAll('[style]')]
        .map(n => n.getAttribute('style'))]

        .join(' ')
        .matchAll(/(--[^:;]*):/gm)]
        .map(a => a[1])

    )],

    obj: () => Object.fromEntries([...[

        [...document.styleSheets]
        .map(s => [...s.cssRules]
        .map(r => r.cssText)),

        [...document.querySelectorAll('[style]')]
        .map(n => n.getAttribute('style'))]

        .join(' ')
        .matchAll(/(--[^:;]*):([^;]*);/gm)]
        .map(a => [a[1],a[2]])

    )

};

this will get really close to finding all css variable names; it looks in external styles and inline style parameters aswell

it has to be run either in a defer script, from a script tag after the body, or after window.onload - all the styles should be loaded before running this

cssVars.list() // returns array of all css variable names

cssVars.obj() // returns object of key:::value pairs

the cssVars.obj() version seems worthless to me; the value of the variable will simple be whatever is coded - if you want to know the actual current value being used by an element, you have to .getPropertyValue('--css-variable') anyway, so I don't know why people would be interested in that, except maybe to see matchAll() and the regex?