Web 应用程序中的暗模式切换器

深色模式（配色方案“ 黑暗中的光明 ”）近年来非常流行。它应该在眼睛上更容易并且更少消耗电池。今天，桌面和移动设备的所有主要操作系统都支持这种模式。

在当前文章中，我们将了解如何创建一个响应用户在操作系统中选择的配色方案的 Web 应用程序，并学习如何通过将其保存到浏览器的本地存储中来添加一个记住该选择的切换器。

首选配色方案功能

类似于我们如何使用 CSS 媒体查询 使应用程序响应变化 屏幕分辨率 , 这样的请求可以用来响应 用户选择的配色方案 .

 身体 {  
 背景：白色；颜色：黑色;  
 } @media（喜欢颜色方案：光）{  
 身体 {  
 背景：白色；颜色：黑色;  
 }  
 } @media（喜欢颜色方案：深色）{  
 身体 {  
 背景：黑色；白颜色;  
 }  
 }

您可以在沙箱中看到此代码的运行情况：

专业意见

出于测试目的，您可以强制将值设置为 光 或者 黑暗的 通过 Chrome 开发者工具。

打开 DevTools (F12)，按 shift+cmd/ctrl+P 打开命令提示符，输入 喜欢 并选择一个选项：

也可以通过单击右侧的三个垂直点并转到更多工具 > 渲染来访问这些设置。

暗模式开关

添加用户启用/禁用暗模式的能力，无论 操作系统设置 ，我们需要JavaScript。让我们从添加开始 数据属性 数据配色方案 在 根元素 .在初始页面加载时，此值将根据系统设置进行设置。

 常量 getPreferredColorScheme = () => {  
 const darkQuery = "(prefers-color-scheme: dark)";  
 常量 darkMQL = window.matchMedia ？ window.matchMedia(darkQuery) : {};  
 if (darkMQL.media === darkQuery && darkMQL.matches) {  
 返回“黑暗”；  
 } 返回“默认”；  
 }; document.documentElement.setAttribute("数据颜色方案", getPreferredColorScheme());

接下来，我们将添加一组变量，这些变量将根据此数据属性发生变化。

 ：根 {  
 --颜色文本：#191924；  
 --颜色背景：#fff；  
 } :root[data-color-scheme="dark"] {  
 --颜色文本：#fff；  
 --颜色背景：#0d202d；  
 } 身体 {  
 颜色: var(--color-text);  
 背景颜色：var（--颜色背景）；  
 }

最后，对于单选按钮，在 HTML 中添加一个按钮：

 <button id="button">切换暗模式</button>

和一个事件处理程序 点击 в JavaScript：

 document.getElementById("button").onclick = () => {  
 const colorScheme = document.documentElement.getAttribute("data-color-scheme"); document.documentElement.setAttribute("data-color-scheme", colorScheme === "default" ? "dark" : "default");  
 };

现场演示可以在这里查看：

保存用户的选择

您会注意到，当页面重新加载时，该属性的值被重置。我们通过将数据属性存储在 本地存储 .

加载页面时，需要检查是否有可以使用的值：

 常量颜色方案 = **localStorage.getItem("配色方案") ||** getPreferredColorScheme(); document.documentElement.setAttribute("data-color-scheme", colorScheme);

使用开关时还需要保存新值：

 document.getElementById("button").onclick = () => {  
 const colorScheme = document.documentElement.getAttribute("data-color-scheme"); const newColorScheme = colorScheme === “默认”？ “黑暗”：“默认”； document.documentElement.setAttribute("数据颜色方案", newColorScheme); **localStorage.setItem("配色方案", newColorScheme);**  
 };

你可以在这里检查所有这些：

另请阅读：

• 设计中的视觉层次
• 如何使用 CSS 和 Vanilla JavaScript 编写基于 Cookie 的主题切换器
• 设计师色彩理论 - 短期课程（附信息图）

阅读我们 电报 , VK 和 Yandex.Zen

文章翻译 维尼修斯·德安东尼 ： 如何在您的 Web 应用程序中实现暗模式切换

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/36988/22391612