点击明暗模式切换按钮，浅色模式无法平滑淡入的解决方法

问题根源在于你仅给深色模式的样式添加了过渡效果，而HTML元素的默认浅色样式没有设置过渡属性，导致切换回浅色时无法触发平滑变化。

修改步骤： #

1. 给HTML元素添加过渡属性
   将原有html的CSS样式修改为：

   html {
     height: 100%;
     background-color:#b8b8b8;
     transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
   }
   

   这样无论添加还是移除dark-mode类，背景色和文字色的变化都会触发过渡。

2. 移除.dark-mode类中重复的过渡属性
   因为HTML已经设置了过渡，.dark-mode里的过渡可以删掉，简化为：

   .dark-mode {
     background-color: #020C17;
     color: #ffffff;
   }
   

3. 优化导航链接的过渡效果（可选）
   为了让导航链接在模式切换时也有平滑过渡，给.tabs a添加过渡：

   .tabs a {
     display: block;
     padding: 10px;
     color: #333;
     text-decoration: none;
     border-radius: 7px;
     transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
   }
   

修改后，切换浅色/深色模式时，所有相关样式都会平滑过渡，包括从深色切回浅色的场景。

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