文章24
标签14
分类5

网页如何跟随系统切换深色模式


最近看到很多 APP 都有了深色模式,可以随着系统进入深色模式而进入深色模式,后来发现原来网页也可以实现这种效果,就折腾了一个下午帮这个网站弄了一个深色模式。

想要颜色跟随系统变化而变化只需要用 CSS 就可以很简单地实现。首先,需要知道在 CSS 里面有一个叫 @media 的东西,它的作用是媒体查询,也就是说可以根据设备的类型,特征和参数等来实现不同的效果。而 @media 下的 prefers-color-scheme 媒体特性可以用于判断用户系统主题色的设置。 prefers-color-scheme 下有 no-preference (无偏好); light (浅色模式); dark (深色模式)三种状态。

根据 MDN 网站的说法, no-preference 状态可以理解为:浏览器的宿主系统不支持设置主题色,或者支持主题色并默认为/被设为了未设置/无偏好。


先新建一个用来测试的网页,随便写上代码:
浅色模式示例

其中的 CSS 部分是这样的
.card{
	top: 40%;
	margin: auto;
	box-shadow: 0px 8px 60px -10px rgba(13,28,39,0.6);
	padding: 8px 10px 6px;
	background: rgba(255,255,255,.596078431372549);
	border-radius: 25px;
	position: relative;
	text-align: center;
}
p{
	color: #000;
	font-size: 2em;
}
.bg{
	background-image: url(https://cdn.vinking.top/bg.jpg);
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100vh;
	background-size: cover;
	opacity: .4;
	filter: blur(8px);
}

然后我想将这个页面在深色模式的时候文字变成白色,后面的框变成黑色透明,背景图片换成一张暗色系并且调高一点 opacity 的话,我们使用 @media (prefers-color-scheme: dark) 配合 :root 选择器可以把 CSS 部分改成这样:
/*浅色模式*/
:root {
	--p_color:#000;
	--bg_img:url(https://cdn.vinking.top/bg.jpg);
	--card_bg:rgba(255,255,255,.596078431372549);
	--bg_op:.4;
}
/*深色模式*/
@media (prefers-color-scheme: dark){
  :root {
	--p_color:#fff;
	--bg_img:url(https://cdn.vinking.top/iVQRxPEjsx1xw7d.jpg);
	--card_bg:rgba(0,0,0,.4);
	--bg_op:.9;
	}
}
.card{
	top: 40%;
	margin: auto;
	box-shadow: 0px 8px 60px -10px rgba(13,28,39,0.6);
	padding: 8px 10px 6px;
	background: var(--card_bg);
	border-radius: 25px;
	position: relative;
	text-align: center;
}
p{
	color: var(--p_color);
	font-size: 2em;
}
.bg{
	background-image: var(--bg_img);
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100vh;
	background-size: cover;
	opacity: var(--bg_op);
	filter: blur(8px);
}

这样当系统进入深色模式的时候效果就出来了
深色模式示例

最后需要注意一下,有一些浏览器是不支持 prefers-color-scheme 的,具体支持哪一些浏览器可以在 这里 看到


    

    已经有 0 个评论啦

    评论已关闭

    '