网站添加暗黑模式html+js
有些时候我们喜欢大半夜不睡觉刷抖音刷微博,突发奇想为什么我们不能让网站在夜间的时候自动打开夜间模式,让网页背景变暗,让图片变暗,这样那些夜猫观看我们的博客时候就不会那么刺眼啦,哈哈。话不多说,上教程!
首先第一步,在您的页面footer文件加入以下js代码。
< script type = "text/javascript" >
function switchNightMode() {
var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || "0";
if (night == "0") {
document.body.classList.add("night");
document.cookie = "night=1;path=/";
console.log("夜间模式开启")
} else {
document.body.classList.remove("night");
document.cookie = "night=0;path=/";
console.log("夜间模式关闭")
}
} (function() {
if (document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") === "") {
if (new Date().getHours() > 21 || new Date().getHours() < 6) {
document.body.classList.add("night");
document.cookie = "night=1;path=/";
console.log("夜间模式开启")
} else {
document.body.classList.remove("night");
document.cookie = "night=0;path=/";
console.log("夜间模式关闭")
}
} else {
var night = document.cookie.replace(/(?:(?:^|.*;\s*)night\s*\=\s*([^;]*).*$)|^.*$/, "$1") || "0";
if (night == "0") {
document.body.classList.remove("night")
} else {
if (night == "1") {
document.body.classList.add("night")
}
}
}
})();
</script>
加好后在您的页面body处加入php判断,这样当检测到cookie相关字段时直接输出body的class为night,已防止页面闪烁。
<body class="<?php echo($_COOKIE['night'] == '1' ? 'night' : ''); ?>">
最后再将网站中所有需要变暗的地方调整其css,已达到变暗效果,具体css调整示例可看下方
body.night 需要调整的区块{
background-color: #000000;
color: #aaa;
}
body.night img {
filter: brightness(30%);
}
这样当晚上9点到白天6点之间,网站打开时就自动会变成暗黑模式。当然,你也可以加一个按钮,来手动控制打开关闭暗黑模式。如下代码
<a href="javascript:switchNightMode()" target="_self">Dark</a>
至此教程就结束了,需要强调的是,该方法需要修改的css非常的多,需要大家细心的调整及适配,不太建议过于复杂的网站添加此功能,不然css写到你哭,哈哈!
文章由官网发布,如若转载,请注明出处:https://www.veimoz.com/95
1 条评论
3.8k
发表评论
仅有一条评论
热门文章
自媒体博客Spimes主题22w 阅读
Spimes主题专为博客、自媒体、资讯类的网站设计....
vCard主题个人简历主题12w 阅读
一款个人简历主题,可以简单搭建一下,具体也比较简单....
Spzac个人资讯下载类主题9w 阅读
用于作品展示、资源下载,行业垂直性网站、个人博客,....
Splity博客双栏主题8.1w 阅读
仿制主题,Typecho博客主题,昼夜双版设计,可....
热评文章
自媒体博客Spimes主题401 评论
Splity博客双栏主题186 评论
Spzac个人资讯下载类主题89 评论
Splinx博客图片主题35 评论
Spzhi知识付费社区主题34 评论
vCard主题个人简历主题29 评论
三栏清新博客S_blog主题29 评论
Pure轻简主题28 评论
可以根据操作系统变换颜色吗