如何为暗色模式切换按钮添加平滑过渡动画

通过为相关元素添加 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 中直接应用：

...
...

这样既保持结构清晰，又便于全局控制过渡行为。

总结：平滑切换 = 合理的 CSS transition + 明确的前后状态样式定义。JavaScript 只需专注状态切换（toggle），视觉动效完全交由 CSS 处理——这才是现代 Web 开发中“关注点分离”的最佳实践。