如何进行平滑的暗/亮模式转换

好的，现在您正在访问一个网站，并且该网站处于深色模式。 但您更喜欢轻型模式（如果您这样做，那么，这就是您的特权？）。现在是凌晨 3 点。您单击暗/亮模式切换。 突然，一道闪光！ 随后出现暂时失明，随后出现耳鸣和癫痫发作。 后来去急诊室的费用很高（感谢美国的医疗保健系统！），然后你就损失了数千美元。

这有点夸张，但不和谐的主题切换无疑很烦人。 我们来解决它吧！ 使用尖端的 CSS（好吧，也许不是那个尖端），我们可以实现平滑过渡。 我将提供代码和解释。

首先，您需要一个主题切换器。 如果您还没有说明，请查看此链接以获取说明。 此方法与 CSS 变量 (--color: blue;) 和类似方法兼容。

代码如下：

<code class="language-css">* {
  transition-duration: 1s;
}</code>

将 1s（一秒）调整为您喜欢的过渡速度。

星号 (*) 是通用选择器，意味着页面上的每个元素都会受到影响。 通过设置 transition-duration，我们告诉浏览器在任何元素的任何属性发生变化时应用平滑过渡。 简单！

感谢您的阅读！

安德鲁·麦克西利恩

以上是如何进行平滑的暗/亮模式转换的详细内容。更多信息请关注PHP中文网其他相关文章！