架构师_程序员_码农网

 找回密码
 注册[Register]

QQ登录

只需一步,快速开始

查看: 1245|回复: 2

[Bootstrap] 基于 Bootstrap 开启 dark 黑夜(暗黑)模式

[复制链接]
发表于 2023-4-4 09:32:35 | 显示全部楼层 |阅读模式
需求:看到一些网站右小角有一个灯泡和月亮的小图标,点击灯泡图标就是光模式,点击月亮图标就是夜晚模式(暗黑模式),看着非常炫酷,我的网站是基于 Bootstrap 前端框架开发的,搜索了一些相关资料和教程。

bootstrap4https://github.com/vinorodrigues/bootstrap-dark
bootstrap5https://github.com/vinorodrigues/bootstrap-dark-5
教程文档https://vinorodrigues.github.io/bootstrap-dark/

该代码编译了原始工作主体的四种方法(以及总共六种变体)

手动切换模式:https://vinorodrigues.github.io/bootstrap-dark/test-1.html
跟随操作系统自动切换:https://vinorodrigues.github.io/bootstrap-dark-5/examples/cheatsheet-dark.html


anhei.gif

(特别像 iPhone 白天、夜间切换,黑暗模式适合低光环境使用,可以更好的保护用户的眼睛,同时不打扰到别人,也能更加省电。)

根据文档教程,尝试引入到我们的网站,首先看下效果图如下:

dark.gif

在 head 引入样式,代码如下:

按钮图标 html 代码:

切换模式 js 代码:

(完)




上一篇:【转】Linux 下指定端口开放访问权限
下一篇:HTTP 请求压测之 Cassowary 工具
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
 楼主| 发表于 2023-4-7 21:08:11 | 显示全部楼层


使用以下命令检查其是否为夜晚模式(dark mode):
QQ截图20230407210721.jpg
码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
 楼主| 发表于 2023-4-7 21:09:46 | 显示全部楼层
我们可以使用事件侦听器检测模式更改,实现代码如下所示:

码农网,只发表在实践过程中,遇到的技术难题,不误导他人。
您需要登录后才可以回帖 登录 | 注册[Register]

本版积分规则

免责声明:
码农网所发布的一切软件、编程资料或者文章仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。如有侵权请邮件与我们联系处理。

Mail To:help@itsvse.com

QQ|手机版|小黑屋|架构师 ( 鲁ICP备14021824号-2 )|网站地图

GMT+8, 2024-3-29 19:55

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表