WordPress暗黑模式切换JS无法识别CSS变量问题求助

问题背景 #

将Webflow主题迁移至WordPress后，使用Timothy Ricks的Dark Mode Toggle脚本实现暗黑模式切换，原Webflow站点功能正常，但WordPress站点抛出No variables found matching tr-color-vars attribute value错误，尽管:root中已正确定义对应的--color--xxx和--dark--xxx系列CSS变量。

关键代码信息 #

脚本加载标签

<script tr-color-vars="text,background,button-background,button-text,background-50,nav-menu-link,toggle-bg,toggle-offset"
duration="0.5" ease="power1.out"
src="https://cdn.jsdelivr.net/gh/timothydesign/scripts@v1.0.2/dark-mode-toggle.js">
</script>

CSS变量定义

:root {
    --swatch--light: white;
    --swatch--transparent: rgba(255, 255, 255, 0);
    --swatch--brand: #8a2d59;
    --swatch--color: #1f1e3e;
    --swatch--dark: #201c1c;

    --color--background: var(--swatch--light);
    --color--text: var(--swatch--dark);
    --color--button-background: var(--swatch--brand);
    --color--button-text: var(--swatch--light);
    --color--toggle-bg: var(--swatch--light);
    --color--nav-menu-link: var(--swatch--light);
    --color--toggle-offset: 0rem;
    --color--background-50: rgba(255, 255, 255, .5);

    --dark--background: var(--swatch--dark);
    --dark--text: var(--swatch--light);
    --dark--button-background: var(--swatch--brand);
    --dark--button-text: var(--swatch--light);
    --dark--toggle-bg: var(--swatch--brand);
    --dark--nav-menu-link: var(--swatch--light);
    --dark--toggle-offset: 2rem;
    --dark--background-50: rgba(53, 50, 51, .5);
}

脚本核心报错逻辑

cssVariables.split(",").forEach(function (item) {
  let lightValue = computed.getPropertyValue(`--color--${item}`);
  let darkValue = computed.getPropertyValue(`--dark--${item}`);
  if (lightValue.length) {
    if (!darkValue.length) darkValue = lightValue;
    lightColors[`--color--${item}`] = lightValue;
    darkColors[`--color--${item}`] = darkValue;
  }
});

if (!Object.keys(lightColors).length) {
  console.warn("No variables found matching tr-color-vars attribute value");
  return;
}

排查方向与解决方案 #

1. 脚本执行时机不匹配 #

WordPress资源加载顺序可能导致脚本在CSS变量解析完成前就运行。Webflow默认会优先加载CSS并延迟脚本执行，但WordPress主题/插件可能打乱了这个顺序，导致脚本读取:root变量时，CSS还未生效。

解决方式：

• 将脚本移至</body>标签前，确保DOM和CSS完全加载后再执行；
• 给脚本添加defer属性，延迟执行直到文档解析完成：

  <script defer tr-color-vars="text,background,button-background,button-text,background-50,nav-menu-link,toggle-bg,toggle-offset"
  duration="0.5" ease="power1.out"
  src="https://cdn.jsdelivr.net/gh/timothydesign/scripts@v1.0.2/dark-mode-toggle.js">
  </script>
  

2. CSS变量被覆盖或未正确注入 #

WordPress的主题压缩、插件优化或自定义设置可能覆盖了:root变量，导致脚本无法读取。

解决方式：

• 打开浏览器开发者工具，选中<html>标签，查看Styles面板中:root规则下的变量是否存在；
• 确认CSS变量已正确添加到WordPress：可通过主题自定义的「额外CSS」功能添加，或直接修改主题的style.css文件；
• 暂时禁用缓存、压缩类插件，测试是否是插件过滤了CSS变量。

3. 脚本选择器冲突 #

页面中若存在多个带tr-color-vars属性的<script>标签，脚本可能选中错误的标签，导致读取的变量列表不匹配。

解决方式：

• 在浏览器控制台执行document.querySelector("[tr-color-vars]")，确认返回的是你添加的目标脚本标签；
• 给目标脚本添加唯一标识（比如id="dark-mode-script"），修改脚本内的选择器为document.querySelector("#dark-mode-script")。

4. 变量引用解析问题 #

脚本通过getComputedStyle读取变量时，若变量值为嵌套引用（比如--color--background: var(--swatch--light)），极端情况下可能出现解析延迟。

测试方式：

• 临时将:root中的变量改为硬编码值（比如--color--background: white），若脚本能正常读取，则回到执行时机或CSS加载的问题排查。

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