切换body背景色时如何让锚点标签同步改变颜色？

问题原因 #

浏览器对<a>标签有默认的文本颜色样式，这个样式优先级高于从body继承的颜色，所以即便修改了body的color属性，<a>标签的颜色也不会跟着变化。

解决方案1：直接针对锚点标签设置颜色 #

修改CSS代码，分别定义正常模式和深色模式下<a>标签的颜色：

body {
  background-color: white;
  color: black;
}

/* 浅色模式下的锚点颜色 */
body a {
  color: black;
}

.dark-mode {
  background-color: black;
  color: white;
}

/* 深色模式下的锚点颜色 */
body.dark-mode a {
  color: white;
}

如果你的锚点统一用了.links类，也可以把选择器改成body.dark-mode .links，这样更精准。

解决方案2：使用CSS变量（更灵活的方式） #

用CSS变量统一管理颜色，后续调整模式配色会更方便：

/* 浅色模式的变量定义 */
body {
  --bg-color: white;
  --text-color: black;
  --link-color: black;
  
  background-color: var(--bg-color);
  color: var(--text-color);
}

/* 深色模式覆盖变量 */
body.dark-mode {
  --bg-color: black;
  --text-color: white;
  --link-color: white;
  
  background-color: var(--bg-color);
  color: var(--text-color);
}

/* 锚点标签绑定变量 */
a {
  color: var(--link-color);
}

你的JavaScript和HTML代码不需要改动，保持原样即可。

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