React笔记应用明暗模式切换时笔记组件样式不生效问题

你遇到的问题来自两个核心原因：

1. 暗色主题下的--note变量值设置错误，你当前设成了白色#EEEEEE，和你期望的暗色笔记卡片效果不符
2. 搜索栏、保存按钮、删除图标等组件的颜色使用了硬编码的固定色值，没有绑定CSS变量，所以不会跟随主题切换

修改步骤 #

第一步：调整主题CSS变量定义

修改index.css里的主题变量块，调整错误值并新增缺失的公共变量：

.theme-light {
  --dark-text: black;
  --light-text: #5E4B56;
  --dark-background: #FFCFDF;
  --light-background: #FFCFDF;
  --accent: #DBE7E4;
  --button-border: #5E4B56;
  --note: #E0F9B5;
  --note-new: #A5DEE5;
  /* 新增通用变量 */
  --save-button-bg: #e1e1e1;
  --save-button-hover-bg: #ededed;
  --search-bg: rgb(233, 233, 233);
  --search-icon-color: black;
}
.theme-dark {
  --dark-text: #EEEEEE;
  --light-text: #F9F8F8;  
  --dark-background: #222831;
  --light-background: #586F7C;
  --accent: #B8DBD9;
  --button-border: #B8DBD9;
  /* 修改笔记卡片为深色 */
  --note: #393E46;
  --note-new: #00ADB5;
  /* 新增通用变量 */
  --save-button-bg: #586F7C;
  --save-button-hover-bg: #6c8694;
  --search-bg: #393E46;
  --search-icon-color: #EEEEEE;
}

第二步：替换所有硬编码色值为CSS变量

把index.css里以下选择器的固定色值替换为对应变量：

.save {
    size: 10rem;
    background-color: var(--save-button-bg);
    border: none;
    border-radius: 15px;
    padding: 5px 10px 5px 10px;
}

.save:hover {
    background-color: var(--save-button-hover-bg);
    cursor: pointer;
}

.search {
    display: flex;
    align-items: center;
    background-color: var(--search-bg);
    border-radius: 10px;
    padding: 5px;
    margin-bottom: 1.5em;
}

.search input {
    border: none;
    background-color: var(--search-bg);
    color: var(--dark-text);
    width: 100%;
}

.search-icons {
    color: var(--search-icon-color);
}

.delete-icon {
    cursor: pointer;
    color: var(--dark-text);
}

修改完成后所有组件就会跟随主题同步切换样式，如果你觉得暗色模式下新笔记的蓝色亮度不符合预期，自行调整.theme-dark里的--note-new值即可。

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