如何使用JavaScript和CSS观察系统黑暗模式的变化

DebugUsery
158 阅读5分钟

如何使用JavaScript和CSS观察系统黑暗模式的变化

黑暗模式是网络中最必要的功能之一。许多人都喜欢它，因为它很容易让人看清。在本教程中，我们将学习如何使用Javascript和CSS来检测系统的黑暗模式是否启用，并相应地改变页面的颜色。

大多数现代浏览器都会根据操作系统的主题来改变其颜色方案。本教程假设你的浏览器属于这一类。

如果你的浏览器不根据操作系统主题改变配色方案（例如，在Ubuntu中使用自定义GTK主题），你可以在浏览器设置中手动改变浏览器的配色方案。

在本教程的第一部分，我们将学习如何使用JavaScript检测系统的黑暗模式。在第二部分，我们将使用CSS来检测系统的暗色模式。

使用Javascript

在这一部分，我们将学习如何使用Javascript检测系统的暗黑模式。

创建一个名为index.html 的新文件，并在代码编辑器中打开它。

在该文件中添加以下代码。

<!DOCTYPE html>
<head>
    <title>Some title</title>
</head>
<body>
    <div id="content">
        <h1>Hey there</h1>
    </div>
</body>
<script src='./script.js'></script>
</html>

id 我们已经创建了一个简单的HTML文件，其中包含一个<div> 元素，content 。我们将使用这个元素来显示文本Hey there 。

让我们来创建要切换的CSS。

.dark {
	color: #fff;
}

.light {
	color: #000;
}

创建一个名为script.js 的新文件，在你的代码编辑器中打开它。

在该文件中添加以下代码。

let dark = window.matchMedia("(prefers-color-scheme: dark)").matches;
console.log(matched);

let body = document.querySelector("body");
let content = document.getElementById("content");

if (dark) {
	body.style.backgroundColor = "#1a1a1a";
	content.setAttribute("class", "dark");
} else {
	body.style.backgroundColor = "#f5f5f5";
	content.setAttribute("class", "light");
}

我们首先创建一个名为dark 的变量，并将其分配给window.matchMedia 函数。这个函数将返回一个MediaQueryList 对象。这个对象将包含一个matches 属性，如果系统的黑暗模式被启用，这个属性将是true 。

然后我们创建一个名为body 的变量，并将其分配给document.querySelector 函数。这个函数将返回符合指定选择器的第一个元素。在这种情况下，我们要选择body 元素。

然后，我们创建一个名为content 的变量，并将其分配给document.getElementById 函数。这个函数将返回第一个匹配指定id的元素。在这种情况下，我们要选择content 元素。

然后我们检查dark 变量是否是true 。如果是，我们将body 的背景颜色设置为#1a1a1a ，将content 元素的class 属性设置为dark 。如果不是，我们将body 的背景颜色设置为#f5f5f5 ，将content 元素的class 属性设置为light 。

在浏览器中打开index.html ，看看结果。

关于这个方法需要注意的一点是，这个变化不是实时的。这个变化只有在重新加载页面后才会被应用。

为了解决这个问题，我们可以使用addEventListener 函数，如下图所示。

let body = document.querySelector("body");
let content = document.getElementById("content");

window
	.matchMedia("(prefers-color-scheme: dark)")
	.addEventListener("change", function (e) {
		const colorScheme = e.matches ? "dark" : "light";
		console.log(colorScheme);

		if (colorScheme === "dark") {
			body.style.backgroundColor = "#1a1a1a";
			content.setAttribute("class", "dark");
		} else {
			body.style.backgroundColor = "#f5f5f5";
			content.setAttribute("class", "light");
		}
	});

我们给window 对象添加一个事件监听器。addEventListener 函数需要两个参数：事件名称和回调函数。

事件名称是change ，回调函数是e 变量。e 变量是一个包含事件信息的对象。

在这种情况下，我们对e 对象的matches 属性感兴趣。如果系统的黑暗模式被启用，matches 属性将是true 。

现在你可以在浏览器中打开index.html ，看看结果。

上面的例子是黑暗模式检测的一个非常基本的实现。

要在现实世界的应用程序中使用它，如果需要改变大量的CSS，你可以用一个函数来替换if else 块中的代码，该函数将加载正确的CSS文件。

let loadColorScheme = (scheme) => {
	let head = document.getElementsByTagName("head")[0];
	let link = document.createElement("link");

	link.type = "text/css";
	link.rel = "stylesheet";
	link.href = `./css/${scheme}.css`;

	head.appendChild(link);
};
// assuming the if else block is inside window.matchMedia()
if (colorScheme === "dark") {
	loadColorScheme("dark");
	// loads /css/dark.css
} else {
	loadColorScheme("light");
	// loads /css/light.css
}

使用CSS

随着时间的推移，CSS已经得到改进，为网络浏览器增加了更多的功能。现在可以使用prefers-color-scheme 媒体查询。

prefers-color-scheme 媒体查询允许我们检测系统的黑暗模式是否被启用。这是一个非常有用的功能，它将使我们能够相应地改变页面的颜色。

如果系统的黑暗模式被启用，这个媒体查询将返回true 。如果用户使用的是浅色主题，它将返回false 。

使用本教程第一部分的Html，让我们看看如何使用CSS检测系统的黑暗模式。

@media (prefers-color-scheme: light) {
	body {
		background-color: #f5f5f5;
		color: #222;
	}
}

@media (prefers-color-scheme: dark) {
	body {
		background-color: #222;
		color: #fff;
	}
}

这个CSS代码将把body 的背景颜色设置为#f5f5f5 ，字体颜色为深灰色；如果系统的深色模式被禁用。否则，它将把body 的背景颜色设为深灰色，字体颜色设为白色。

该方法对系统暗色模式的变化做出实时反应。

这个方法在Internet Explorer上不起作用。

总结

在本教程中，我们学习了如何使用JavaScript和CSS来检测系统的黑暗模式。

在构建Web应用程序时，你可以使用JavaScript或CSS来检测系统的黑暗模式。

avatar
文章
阅读
粉丝