get all css variable from :root

main.js

/*  
const list = Array.from(document.styleSheets)
  .filter((sheet) => sheet.href === null || sheet.href.startsWith(window.location.origin))
  .reduce(
    (acc, sheet) => [ //lower performance for this way
      ...acc,
      ...Array.from(sheet.cssRules).reduce(
        (def, rule) =>
          (def =
            rule.selectorText === ':root'
              ? [...def, ...Array.from(rule.style).filter((name) => name.startsWith('--'))]
              : def),
        []
      )
    ],
    []
  );
*/
const list = Array.from(document.styleSheets)
  .filter((sheet) => sheet.href === null || sheet.href.startsWith(window.location.origin))
  .reduce(
    (acc, sheet) => acc.concat(Array.from(sheet.cssRules).reduce(
      (def, rule) => {
        if (rule.selectorText === ':root')
          return def.concat(Array.from(rule.style).filter((name) => name.startsWith('--')))
        return def
      },
      []
    )),
    []
  );
const style = getComputedStyle(document.body);
list.reduce((map, cur) => {
  return { ...map, [cur]: style.getPropertyValue(cur) };
}, {});