使用 10 行 JavaScript 代码实现基于用户操作系统偏好的明暗主题切换
## 引言
在当今的Web开发中，为用户提供个性化体验已成为一种标准做法。其中一个流行的趋势就是支持暗模式，因为它不仅有助于节省电池电量，还能减轻长时间使用屏幕带来的视觉疲劳。在这篇文章中，我们将介绍如何使用简单的JavaScript 代码和 CSS 来根据用户的操作系统偏好自动切换网站的主题，并允许用户手动在明暗模式之间切换。
## 目标
我想要实现什么？我试图用这种方法实现两件事。
1. 我需要允许网站以用户喜欢的方式加载（他们已经在操作系统中选择了主题的部分）
2. 但我还想允许他们在加载后在暗模式和亮模式之间切换。
因此，我们将有一个网站，可以加载用户期望的主题，然后允许他们在需要时进行更改。
## 实现步骤
### 步骤 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。下次他们点击按钮时，我们已经为配色方案设置了值，因此我们只需在深色或浅色之间切换。
## 实现效果
## 结论
通过以上步骤，我们成功实现了根据用户操作系统偏好自动加载明暗主题，并提供了一个简单的按钮让用户可以自由切换主题。这种方法既简单又高效，只需要少量的代码即可实现。如果你正在寻找一种轻量级的方式来为你的网站添加主题切换功能，那么这种方法将是一个不错的选择。
演示图挺好看的。
页:
[1]