引言
在当今的 Web 开发中，为用户提供个性化体验已成为一种标准做法。其中一个流行的趋势就是支持暗模式，因为它不仅有助于节省电池电量，还能减轻长时间使用屏幕带来的视觉疲劳。在这篇文章中，我们将介绍如何使用简单的 JavaScript 代码和 CSS 来根据用户的操作系统偏好自动切换网站的主题，并允许用户手动在明暗模式之间切换。
目标
我想要实现什么？
我试图用这种方法实现两件事。
- 我需要允许网站以用户喜欢的方式加载（他们已经在操作系统中选择了主题的部分）
- 但我还想允许他们在加载后在暗模式和亮模式之间切换。
因此，我们将有一个网站，可以加载用户期望的主题，然后允许他们在需要时进行更改。
实现步骤
步骤 1: 创建切换按钮
首先，我们需要在 HTML 中添加一个按钮或图标作为切换主题的触发器。
<button class="mode" aria-label="Toggle Theme">
<img src="./yueliang.png">
</button>
我使用的图片作为按钮，其中包含月亮的 svg 图片。您可以添加按钮或复选框，以便在两个选项之间切换。
步骤 2: 将颜色详细信息作为自定义属性放入 CSS 中
接下来，我们需要在 CSS 中定义主题相关的颜色，并使用 color-scheme 属性来指定配色方案。我们将使用 light-dark() 函数来根据用户的偏好自动选择颜色：
:root {
color-scheme: light dark;
--light-bg: ghostwhite;
--light-color: darkslategray;
--light-code: tomato;
--dark-bg: darkslategray;
--dark-color: ghostwhite;
--dark-code: gold;
}
body {
background-color: light-dark(var(--light-bg), var(--dark-bg));
color: light-dark(var(--light-color), var(--dark-color));
}
code {
color: light-dark(var(--light-code), var(--dark-code));
}
/* 用于区分明暗模式 */
.light {
color-scheme: light;
}
.dark {
color-scheme: dark;
}
好的,所以在:root中你会看到名为的属性color-scheme，这将是我们的游戏规则改变者。
如你所见，它接受值light或dark。我还创建了两个类，.light它们.dark将配色方案的值设置为深色或浅色。
步骤 3: 为代码的各个部分添加颜色
body{
background-color: light-dark(var(--light-bg), var(--dark-bg));
}
...
现在，每当属性要求颜色时（例如background，color属性），您都可以使用名为的函数light-dark()【MDN官方文档 】
此函数采用两个值，第一个值在color-scheme设置为时使用，第二个值在设置为暗light时使用color-scheme
步骤 4: 使用 JavaScript 在明暗模式间切换
最后，我们需要编写 JavaScript 代码来监听按钮点击事件，并根据用户的系统偏好或当前状态切换主题：
const modeButton = document.querySelector('.mode');
modeButton.addEventListener('click', function () {
const theme = document.documentElement.style.colorScheme;
if (theme === null) {
// 判断用户的系统偏好
if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
// 用户偏好暗模式
document.documentElement.style.colorScheme = 'light';
} else {
// 用户偏好亮模式
document.documentElement.style.colorScheme = 'dark';
}
} else {
// 根据当前模式切换
document.documentElement.style.colorScheme = (theme === 'light') ? 'dark' : 'light';
}
});
这里，document.documentElement.style.colorScheme其实是指:rootCSS中的元素。
正如我们在上一步中已经实现以用户首选模式打开网站一样，当单击切换按钮时，它会执行以下工作。
它检查配色方案是否有任何值，如果没有，则网站处于用户首选模式，我们需要确定它是暗还是亮来更改模式。
它用于window.matchMedia("(prefers-color-scheme:dark)").matches查找它是否处于暗模式，如果处于暗模式，我们将配色方案更改为light，如果不是，我们将其更改为dark。
下次他们点击按钮时，我们已经为配色方案设置了值，因此我们只需在深色或浅色之间切换。
实现效果
结论
通过以上步骤，我们成功实现了根据用户操作系统偏好自动加载明暗主题，并提供了一个简单的按钮让用户可以自由切换主题。这种方法既简单又高效，只需要少量的代码即可实现。如果你正在寻找一种轻量级的方式来为你的网站添加主题切换功能，那么这种方法将是一个不错的选择。
