Bear 博客上的浅色/深色模式分步指南
我最近使用偏好颜色方案媒体功能与 light-dark() 颜色函数相结合,在我的 Bear 博客上实现了亮/暗模式切换。
我是这样做的。
第 1 步:设置 CSS
CSS 在过去几年中获得了一些很酷的新功能,包括 light-dark() 颜色函数。此功能可让您为任何元素指定两种颜色 - 一种用于浅色模式,另一种用于深色模式。
例如,如果您希望背景在浅色模式下为白色,在深色模式下为黑色,则设置方法如下:
1 2 3 |
|
我将这种方法应用于浅色和深色模式下具有不同颜色需求的所有元素。
第 2 步:添加 HTML
对于主题切换,我使用了单个图标,而不是开关、单选按钮或下拉菜单。页面加载时仅显示用于切换到相反模式的图标 - 由于我的默认主题是深色,因此深色模式图标最初是隐藏的,而切换到浅色模式的图标是可见的。
onclick 事件调用 switchMode() 函数,该函数处理浅色和深色主题之间的切换(稍后会详细介绍)。这是 HTML 设置:
1 2 3 4 5 6 |
|
第 3 步:创建 JavaScript
JavaScript 处理两个关键任务:
- 当用户单击图标时在明暗模式之间切换。
- 将用户的主题偏好存储在 localStorage 中,以便在将来访问时自动加载。
JavaScript 分为两部分:
中的代码和在页面加载时设置主题并在 中设置代码在页面完全加载后更新元素。将代码添加到
中和 在熊掌记上,前往设置>;页眉和页脚指令.<头> JavaScript 代码
此代码从本地存储中检索以前保存的主题(如果有)。否则,它会检查用户的浏览器或操作系统是否喜欢浅色或深色主题。如果该信息不可用,则默认为深色模式。然后,它将该模式应用于 :root 元素(即基本元素):
1 2 3 4 5 6 7 8 |
|
JavaScript 代码
此代码根据之前在
中设置的preferredScheme 变量显示正确的图标。 switchMode() 函数更新图标显示,更改 :root 配色方案,并将新首选项保存在本地存储中:1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
就是这样——为您的熊掌记博客提供亮/暗模式切换!
以上是Bear 博客上的浅色/深色模式分步指南的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

在本周的平台新闻综述中,Chrome引入了一个用于加载的新属性,Web开发人员的可访问性规范以及BBC Move

有很多分析平台可帮助您跟踪网站上的访问者和使用数据。也许最著名的是Google Analytics(广泛使用)
