如何为全站启用浅色模式且无需大幅改动现有代码？

问题原因 #

你给.column、h3等元素单独设置了固定的颜色和背景属性，这些指定样式的优先级高于从body继承的样式，所以body切换类之后子元素样式不会同步变化。不需要修改现有JS和原有CSS代码，只需要在CSS末尾追加几行后代选择器样式即可实现全量适配。

解决方案 #

将以下CSS代码追加到你现有CSS文件的末尾即可：

/* 浅色模式适配样式 */
body.dark-mode .column {
  background-color: #ffffff;
  color: #000000;
}

body.dark-mode h3 {
  color: #000000;
}

/* 可根据视觉需要调整浅色模式下h2的颜色，以下为适配浅色背景的优化值 */
body.dark-mode h2 {
  color: #6b4f3c;
}

说明 #

这种方案利用CSS的后代选择器特性，只要body标签上存在dark-mode类，所有匹配的子元素都会自动应用对应样式，不需要用JS遍历DOM修改元素类名，适配逻辑全局生效，完全不会侵入你现有的业务代码。

可选优化：你现有切换按钮用了嵌套在button里的a标签，可直接去掉a标签，把onclick="darkmode()"写到button标签上，避免不必要的a标签默认跳转行为。

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