LiYanan2004

前言

前段时间在网站上加入了“动态深色”模式,可以根据 iOS 或 macOS 的系统外观来动态切换颜色。

今天我们来讲一讲如何实现吧~

事前准备

1、分别适配了 深色模式浅色模式 的 css 或其他样式文件¹

2、可编写 css 和 javascript 的代码编辑器(推荐使用 atom

css 部分(个人处理方法)

1、声明你的网站支持的外观

1
:root{color-scheme: dark light}

2、分别声明 浅色模式深色模式 的外观 css

1
2
@media(prefers-color-scheme: light) { // 浅色模式的 css 写在这里 }
@media(prefers-color-scheme: dark) { // 深色模式的 css 写在这里 }

3、没了。

⚠️ :以上是我个人的方法,适用于 css 较多的网站

css 部分(官方处理方法)

1、声明你的网站支持的外观

1
:root{ color-scheme: dark light }

2、分别声明 浅色模式深色模式 的 css 中的颜色

1
2
3
4
5
6
7
8
9
10
11
12
@media(prefers-color-scheme: light) { 
// 浅色模式中网页内容的颜色值
:root{
--color: #fff;
}
}
@media(prefers-color-scheme: dark) {
// 深色模式中网页内容的颜色值
:root{
--color: #000;
}
}

3、在需要时引用变量,像这样:

1
html{ color: var(--color); }

我个人认为这样比较复杂,所以我直接用的第一种

HTML 部分

1、在 head 中引入

1
2
 // 上面放已有的一条 css,一定要放在上面!!,可以加个 title="normal"
<link rel="stylesheet" href="/* 动态深色模式的 css 引用地址 */" title="dynamic">

javaScript 部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<script src="https://cdn.jsdelivr.net/gh/LiYanan2004/LiYanan2004.github.io/website/js/browser_check.min.js" ></script>
<script>
var info = new Browser()
if ((info.os == "Mac OS" && compare(info.osVersion,"10.14.4")) || (info.os == "iOS" && compare(info.osVersion,"13.0"))) { // This is iOS OR macOS and supported dynamic
console.log("This Device supported dynamic color scheme");
setStyle('dynamic')
}

function compare(curV,reqV){
if(curV && reqV){
//将两个版本号拆成数字
var arr1 = curV.split('.'),
arr2 = reqV.split('.');
var minLength=Math.min(arr1.length,arr2.length),
position=0,
diff=0;
while(position<minLength && ((diff=parseInt(arr1[position])-parseInt(arr2[position]))==0)){
position++;
}
diff=(diff!=0)?diff:(arr1.length-arr2.length);
//若curV大于reqV,则返回true
return diff>0;
} else {
//输入为空
console.log("版本号不能为空");
return false;
}
}

function setStyle(title){
var i, links;
links = document.getElementsByTagName("link");
for (i = 0; links[i]; i++) {
if (links[i].getAttribute("rel").indexOf("style") != -1 && links[i].getAttribute("title")) {
links[i].disabled = true;
if (links[i].getAttribute("title").indexOf(title) != -1) links[i].disabled = false;
}
}
}
</script>

⚠️:以上内容放在 body 中,不用担心性能问题,性能影响几乎为 0

本地测试

用自己的方法在本地测试一下吧!

附录

1、Hexo + material-x 快速生成深色模式和浅色模式的方法:liyanan2004.github.io/2019/Enable_Dark_mode_in_your_blog_with_material-x/(Hexo 的其他主题也可参考)

Enjoy it ~

 海报

 评论


字数统计:25.3k  |   正在计算...
总访问量为 次 。