React.js暗黑模式切换问题：需实现标题差异化变色而非仅作用于body

问题背景 #

React实现的暗黑模式切换仅对body生效，需实现：

• 浅色模式：「工作经历」「爱好」「联系方式」三个标题使用各自独立颜色
• 深色模式：这三个标题统一显示为白色

解决方案 #

步骤1：为目标标题添加专属类名 #

在对应React组件中，给三个标题分别添加类名，示例：

// 工作经历标题
<h2 className="section-title work-experience">工作经历</h2>
// 爱好标题
<h2 className="section-title hobbies">爱好</h2>
// 联系方式标题
<h2 className="section-title contact">联系方式</h2>

步骤2：修改CSS样式 #

依托body的light/dark类，分别定义不同模式下的标题样式：

:root {
  --blue: rgb(13, 59, 105);
  --white: rgb(255, 254, 254);
  /* 定义浅色模式下各标题的独立颜色 */
  --work-color: #e74c3c;
  --hobbies-color: #2ecc71;
  --contact-color: #f39c12;
}

body {
  background: var(--background-color);
  color: var(--text-color);
  font-weight: var(--font-weight);
}

body.light {
  --background-color: var(--white);
  --text-color: var(--blue);
  --image: url("./day-forrest.jpg");
}

body.dark {
  --background-color: var(--blue);
  --text-color: var(--white);
  --image: url("./night-forrest.jpg");
}

/* 浅色模式：各标题独立颜色 */
.section-title.work-experience {
  color: var(--work-color);
}
.section-title.hobbies {
  color: var(--hobbies-color);
}
.section-title.contact {
  color: var(--contact-color);
}

/* 深色模式：统一白色 */
body.dark .section-title {
  color: var(--white);
}

/* 保留原有其他样式 */
.title-heading {
  text-align: center;
  margin: 4rem 0 1rem 0;
  font-size: 40px;
  color: var(--text-color);
}

nav {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background: var(--text-color);
}

nav a {
  text-decoration: none;
  font-weight: 500;
  color: var(--background-color);
}

.background-image {
  width: 100%;
  height: 200px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1100px;
  background-image: var(--image);
}

.subtitle {
  width: 40%;
  margin: 2rem auto;
  line-height: 1.6;
  text-align: center;
}

p {
  width: 40%;
  margin: 2rem auto;
  line-height: 1.6;
}

说明 #

• 通过:root统一管理浅色模式下的标题颜色变量，便于后续调整
• 利用CSS选择器优先级，在深色模式下覆盖标题的独立颜色，实现统一白色效果
• 原有暗黑模式切换逻辑无需改动，依赖body的light/dark类即可完成样式切换

内容的提问来源于stack exchange，提问作者Python-Pirate