我最近使用偏好颜色方案媒体功能与 light-dark() 颜色函数相结合，在我的 bear 博客上实现了亮/暗模式切换。
我是这样做的。
css 在过去几年中获得了一些很酷的新功能，包括 light-dark() 颜色函数。此功能可让您为任何元素指定两种颜色 - 一种用于浅色模式，另一种用于深色模式。
例如，如果您希望背景在浅色模式下为白色，在深色模式下为黑色，则设置方法如下：
body {
background-color: light-dark(#fff, #000);
}
我将这种方法应用于浅色和深色模式下具有不同颜色需求的所有元素。
对于主题切换，我使用了单个图标，而不是开关、单选按钮或下拉菜单。页面加载时仅显示用于切换到相反模式的图标 - 由于我的默认主题是深色，因此深色模式图标最初是隐藏的，而切换到浅色模式的图标是可见的。
onclick 事件调用 switchmode() 函数，该函数处理浅色和深色主题之间的切换（稍后会详细介绍）。这是 html 设置：
<a id="preferdark" onclick="switchmode('dark')" style="display: none;">
<!-- icon for switching to dark mode. -->
</a>
<a id="preferlight" onclick="switchmode('light')">
<!-- icon for switching to light mode. -->
</a>
javascript 处理两个关键任务：
javascript 分为两部分：
中的代码用于在页面加载时设置主题，以及以上就是Bear 博客上的浅色/深色模式分步指南的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
480
收藏
