科学类网站深色模式部分不生效，h2标题样式切换失败求助

问题原因 #

你遇到的h2标签配色不跟随深色模式切换的问题，核心是样式优先级冲突，具体可分为以下几种常见情况：

1. 网站其他CSS规则中存在优先级更高的h2样式定义（比如用类选择器、ID选择器给h2设置了固定颜色值），覆盖了你当前写的通用标签选择器的var(--text-color)规则
2. 部分h2标签使用了行内样式固定颜色，不会继承body的变量设置
3. 你给h2的父级元素重新定义了--text-color变量，阻断了变量继承

修复方案 #

1. 排查并覆盖冲突样式 #

打开浏览器开发者工具，选中不生效的h2元素，在「样式」面板找到优先级更高的覆盖规则，针对性修改：

• 找到h2对应的类名（比如.content-title、.category-heading），重写优先级更高的规则：

/* 可根据你实际的h2类名调整，确保优先级高于原有规则 */
body.dark-theme h2,
body.dark-theme .content-title,
body.dark-theme .category-heading {
  color: var(--text-color);
}
/* 如果冲突太严重可临时加!important，不推荐长期使用 */
h2 {
  color: var(--text-color) !important;
}

• 如果是行内样式导致的，把行内的固定颜色改为变量即可：

<!-- 改前 -->
<h2 style="color: #222">chemistry</h2>
<!-- 改后 -->
<h2 style="color: var(--text-color)">chemistry</h2>

2. 修正现有代码的隐性问题 #

你当前的JS代码里localStorage持久化逻辑有错误，会导致刷新后主题重置，可同步修复：

const btn = document.querySelector(".btn-toggle");
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
// 读取本地存储的主题，没有的话跟随系统偏好
const currentTheme = localStorage.getItem("theme") || (prefersDarkScheme.matches ? "dark" : "light");

if (currentTheme == "dark") {
  document.body.classList.add("dark-theme");
} else {
  document.body.classList.add("light-theme");
}

btn.addEventListener("click", function() {
  if (prefersDarkScheme.matches) {
    document.body.classList.toggle("light-theme");
    var theme = document.body.classList.contains("light-theme") ? "light" : "dark";
  } else {
    document.body.classList.toggle("dark-theme");
    var theme = document.body.classList.contains("dark-theme") ? "dark" : "light";
  }
  // 存储实际选中的主题，而不是写死dark
  localStorage.setItem("theme", theme);
});

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