如何使你的手机chrome浏览器自适应网站的夜间模式

如何使你的手机chrome浏览器自适应网站的夜间模式

啰里啰嗦

Mac 电脑系列在比较早(10.14 mojave)的时候就有了 深色模式 ,这个模式在晚上使用的感觉是更加棒,以至于我现在任何时候都开着这个模式使用。当然,这个模式确实能够节能一些,但是并没有护眼的效果。所以,它仅仅是让你的眼睛看着舒服一些。当然,黑色的界面也显得很酷😎。

一些废话

网站加入了夜间模式,当设置的时间到了之后,就会自动切换到夜间模式,使夜间浏览起来更舒适,那么,怎么让浏览器被动的跟着变黑呢?

关键位置

网站页面的 head 部分就是用来描述页面和加载一些脚本文件的。自从 chrome 39开始,chrome 浏览器支持网页中名为 theme-colormeta 标签。只要设置这一个标签,浏览器会随着设置的值改变标签栏的颜色。

类似的代码如下:

1
<meta name="theme-color" content="#FFFFFF">

修改

定位到我们网站的切换深夜模式的代码:

1
2
3
4
5
6
7
8
9
10
function applyNight(value) {
if (value == 'true') {
document.body.className += ' night';
nightIcon.className = nightIcon.className.replace(/ fa-moon/g, '') + ' fa-sun';
} else {
document.body.className = document.body.className.replace(/ night/g, '')
nightIcon.className = nightIcon.className.replace(/ fa-sun/g, '') + ' fa-moon'
}
}
//省略一堆代码,此处仅实例,单独使用无效

核心代码就是判断传入值是否为真,这里传入的值是夜间模式的判断。因为 夜间模式的实现主要是依靠 css!important 语法覆盖实现的,所以这里就只需要添加 .night 就可以了。

那么我们综合分析一下,这个应该插入到 if 循环中去。

原生 js 操作如下:

1
2
var c = document.getElementsByName('theme-color');
c[0].content = "#151313";

getElementsByName 方法返回的是一个数组,这里直接取下标 0 ,完整示例如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
var nightIcon = document.getElementById('night-icon');
var chrome_color = document.getElementsByName('theme-color');
function applyNight(value) {
if (value == 'true') {
document.body.className += ' night';
nightIcon.className = nightIcon.className.replace(/ fa-moon/g, '') + ' fa-sun';
chrome_color[0].content = "#151313"; //切换夜间模式 设置颜色值
} else {
document.body.className = document.body.className.replace(/ night/g, '')
nightIcon.className = nightIcon.className.replace(/ fa-sun/g, '') + ' fa-moon';
chrome_color[0].content = "#FFFFFF"; //切换回日间模式 设置颜色值
}
}

其他受支持的一些属性

1
2
3
4
5
6
7
8
// windows phone
<meta name="msapplication-navbutton-color" content="#FFF">
// ios safari
<meta name="apple-mobile-web-app-status-bar-style" content="#FFF">

//浏览器卡片页图标
<link rel="apple-touch-icon" href="/img/favicon.png"/> //apple
<link rel="icon" sizes="192x192" href="/img/favicon.png"/> //android

待后面整理完成了相关的文件,会将代码上传到GitHub上。

参考阅读

评论


:D 一言句子获取中...