通过为相关元素添加 css `transition` 属性，可实现暗色/亮色模式切换时颜色、背景等样式的平滑过渡，无需 javascript 动画逻辑。
要让暗色模式切换具备视觉上的流畅感，关键不在于修改 JavaScript 的切换逻辑（如 classList.toggle() 已足够简洁高效），而在于利用 CSS 的声明式过渡能力。只要目标元素的样式（如 color、background-color、border-color 等）在 .dark-mode 类中定义了不同值，并且该元素本身设置了对应的 transition 声明，浏览器便会自动在类切换时执行平滑过渡。
✅ 正确做法：在 CSS 中为需要过渡的元素统一添加 transition 规则。例如：
.one,
.three,
.five {
/* 同时过渡多个属性，持续500ms，缓动函数可选 ease/in/out */
transition: color 500ms ease,
background-color 500ms ease,
border 500ms ease;
}⚠️ 注意事项：
- transition 必须写在基础状态（即未添加 .dark-mode 时）的规则中，而非仅写在 .dark-mode 类内；
- 所有需过渡的 CSS 属性，必须在「默认态」和「.dark-mode 态」中都具有明确的、可计算的值（例如不能一边是 background-color: #fff，另一边是 background-color: transparent —— 虽然可行，但建议使用同类型颜色值如 #ffffff ↔ #121212 更稳妥）；
- 若涉及 box-shadow、opacity 或 transform 等属性，也应一并加入 transition 列表；
- 避免使用 transition: all 500ms（虽便捷但可能触发意外过渡或性能损耗），推荐显式声明关键属性。
? 进阶建议：
为提升可维护性，可将过渡规则提取为一个通用工具类：
.transition-smooth {
transition: color 0.5s ease,
background-color 0.5s ease,
border-color 0.5s ease,
box-shadow 0.5s ease;
}然后在 HTML 中直接应用：
<div class="one transition-smooth">...</div> <div class="three transition-smooth">...</div>
这样既保持结构清晰，又便于全局控制过渡行为。
总结：平滑切换 = 合理的 CSS transition + 明确的前后状态样式定义。JavaScript 只需专注状态切换（toggle），视觉动效完全交由 CSS 处理——这才是现代 Web 开发中“关注点分离”的最佳实践。
