getCSSVariables.ts

const getAllCSSVariableNames = () =>
  Array.from(document.styleSheets)
    .filter((s) => s.href === null || s.href.startsWith(window.location.origin))
    .flatMap((s) => Array.from(s.cssRules))
    .filter((r): r is CSSStyleRule => r.type === CSSRule.STYLE_RULE)
    .flatMap((r) => (r.selectorText === ":root" ? Array.from(r.style) : []))
    .filter((name) => name.startsWith("--"))
    .sort();

const getCSSColorVariableNames = () =>
  getAllCSSVariableNames().filter((name) => name.startsWith("--color-"));

const getCSSColorVariables = () => {
  const computedStyle = window.getComputedStyle(document.documentElement);
  return getCSSColorVariableNames().reduce<Record<string, string>>((acc, name) => {
    acc[name] = computedStyle.getPropertyValue(name);
    return acc;
  }, {});
};