求助：暗黑模式切换时CSS设置的文本颜色未改变的修复方案

你的问题是CSS优先级冲突——.light-mode类的样式优先级低于.homepage、.motivepage、.navbar a这些直接设置color: white的类，导致切换亮色模式时文本颜色不变，同时下方卡片的背景色也没切换。按以下步骤修改即可实现目标效果：

1. 升级亮色模式的CSS样式 #

修改你的CSS代码，给.light-mode添加后代选择器，强制覆盖原有元素的样式：

h1 {
  font-family: 'Roboto', sans-serif;
}

h3 {
  font-family: 'Roboto', sans-serif;
}

h2 {
  font-family: 'Roboto', sans-serif;
  font-size: 22px;
}

h5 {
  margin-top: 10px;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
}

body {
  background-color: #424447;
  margin: 0;
}

.light-mode {
  background-color: rgb(220, 220, 220);
  color: black;
}

/* 亮色模式下的导航栏样式 */
.light-mode .navbar {
  background-color: #f1f1f1;
  border-bottom-color: #ccc;
}
.light-mode .navbar a,
.light-mode .navbar a:link,
.light-mode .navbar a:visited {
  color: black;
}
.light-mode .navbar a:hover,
.light-mode .navbar a:active {
  background-color: #ddd;
}

/* 亮色模式下的主页文本 */
.light-mode .homepage {
  color: black;
}

/* 亮色模式下的卡片样式 */
.light-mode .motivepage {
  background-color: white;
  color: black;
  border-color: #ccc;
}

.navbar {
  background-color: #2e3033;
  height: 25px;
  width: 100%;
  border-bottom: solid #65676b;
  font-family: "Segoe UI";
  text-align: center
}

.navbar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.navbar li {
  width: 50%;
  float: left;
}

.navbar li {
  float: center;
}

.navbar a {
  font-family: 'Roboto', sans-serif;
  display: block;
  width: 100%;
  font-size: 20px;
  color: white
}

.navbar a:link,
.navbar a:visited {
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
}

.navbar a:hover,
.navbar a:active {
  background-color: #373b44;
}

.homepage {
  margin-top: 10px;
  margin-left: 15px;
  color: white;
  font-family: "Segoe UI";
}

.motivepage {
  height: 100%;
  width: 45%;
  margin-top: 10px;
  margin-left: 7.5px;
  margin-right: 7.5px;
  border: 4px solid #65676b;
  border-radius: 5px;
  color: white;
  background-color: #56585b;
  font-family: "Segoe UI";
}

2. 修复按钮的拼写错误 #

按钮内联样式里background-color: whitesmokel多了个字母l，改成whitesmoke：

<button onclick="myFunction()" style="float: right; height: 20px; width: 19%; margin: 5px; background-color: whitesmoke; border: 0px solid white; border-radius: 8px;">
  Toggle Light Mode
</button>

修改后点击按钮就能实现：背景变浅灰、所有文本变黑、下方卡片背景变白的效果，和你参考的示例一致。

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