JavaScript如何从样式表字符串提取CSS变量实现动态主题

你计划使用document.documentElement.style.setProperty修改根变量的思路是标准实现，完全可行。
你找到的正则解析方案在限定场景下可以使用，但存在边界问题：

• 适用场景：如果你的样式表字符串固定只包含:root块和外部注释，没有其他选择器的规则、变量名全为小写字母+连字符，该函数可以正常提取变量键值对。
• 存在缺陷：
  1. 变量名匹配规则不完整，CSS变量支持大小写、数字、下划线，当前正则仅匹配小写字母和连字符，特殊变量名会匹配失败
  2. 未限定仅提取:root块内的规则，若样式表包含其他选择器的CSS属性，会混入无关内容
  3. 未处理块内注释，若:root块内存在注释可能出现匹配错误

推荐使用浏览器原生CSS解析API实现，无需维护复杂正则，完全符合CSS规范，不会出现匹配异常：

function extractRootCssVariables(cssText) {
  // 创建临时style节点加载样式文本
  const tempStyle = document.createElement('style');
  tempStyle.textContent = cssText;
  document.head.appendChild(tempStyle);

  const rootVarMap = {};
  // 遍历所有样式规则
  for (const rule of tempStyle.sheet.cssRules) {
    // 仅处理:root选择器的规则
    if (rule.selectorText === ':root') {
      // 遍历所有样式声明
      for (let i = 0; i < rule.style.length; i++) {
        const prop = rule.style[i];
        // 仅提取双横杠开头的CSS变量
        if (prop.startsWith('--')) {
          rootVarMap[prop] = rule.style.getPropertyValue(prop).trim();
        }
      }
      break; // 如果存在多个:root块需要合并，可删除该行
    }
  }

  // 清理临时节点
  document.head.removeChild(tempStyle);
  return rootVarMap;
}

使用方法 #

// 传入你的样式表字符串提取变量
const cssVariables = extractRootCssVariables('采集到的样式表字符串');
// 批量替换全局根变量
Object.entries(cssVariables).forEach(([varName, varValue]) => {
  document.documentElement.style.setProperty(varName, varValue);
});

该方案优势：

• 完全依赖浏览器原生解析能力，兼容所有合法CSS变量语法，包括带url()、空格、特殊字符的变量值
• 自动过滤注释、其他选择器规则，提取结果精准
• 无需维护正则规则，后续CSS语法更新也能自动兼容

内容的提问来源于stack exchange，提问作者Kenny Bones