ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

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

2022-09-16 12:30:09  阅读:397  来源: 互联网

标签:Web scheme 颜色 color 应用程序 -- 切换器 配色 document


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);**  
 };

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

另请阅读:

阅读我们 电报 , VK Yandex.Zen

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

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

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

标签:Web,scheme,颜色,color,应用程序,--,切换器,配色,document
来源: https://www.cnblogs.com/amboke/p/16699415.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有