如何使用 CSS 和 Vanilla JavaScript 编写基于 Cookie 的主题切换器

如何使用 CSS 和 Vanilla JavaScript 编写基于 Cookie 的主题切换器

HTML 代码

要演示深色主题，您将需要一个简单的 HTML 文件。到部分 头 包含的css文件 样式.css 和两个 JavaScript 文件： 黑暗模式.js 和 项目.js .

元选项 - 编码、屏幕布局和标题 - 仅用于填充标题的最小部分。

深色主题切换按钮 - 暗模式 - 位于元素内部 <header> 在第十三行。

 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
 <meta charset="UTF-8">  
 <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">  
 <title>暗模式开关</title>  
 <link rel="stylesheet" href="css/styles.css">  
 <script src="js/darkmode.js" defer></script>  
 <script src="js/project.js" defer></script>  
 </head>  
 <body>  
 <header>  
 <button class="darkmode" title="暗模式开关" aria-hidden="true"></button>  
 </header>  
 <main></main>  
 <footer></footer>  
 </body>  
 </html>

CSS 代码

样式表定义正文 ( 身体 ) 在明暗模式下。还将主题切换器的设计设置为状态 灯光模式 和 暗模式 （负责这个的类的名称是 积极的 ）。

这个 CSS 尽可能简单。

 *{  
 框尺寸：边框框；  
 }  
  
 身体{  
 字体系列：无衬线；  
 背景颜色：#fff;  
 颜色：#000;  
 }  
 body.darkmode{  
 背景颜色：#000;  
 颜色：#fff;  
 }  
  
 标头 .darkmode{  
 位置：绝对；  
 右：2rem；  
 顶部：2rem；  
 宽度：4rem；  
 高度：1.5rem；  
 边框半径：500px；  
 边框：2px 实心 #888;  
 背景颜色：透明；  
 光标：指针；  
 外观：无；  
 }  
 标头 .darkmode::before{  
 内容：'';  
 位置：绝对；  
 左：4px；  
 最高：50%；  
 宽度：1rem；  
 高度：1rem；  
 背景颜色：#888;  
 边界半径：50%；  
 变换：translateY（-50%）；  
 }  
 标头 .darkmode.active::before{  
 左：自动；  
 右：4px；  
 }

项目.js 文件

该文件用于使用函数初始化暗色主题 暗模式初始化（​​） - 稍后将描述 - 在事件中 DOMContentLoaded .

 document.addEventListener('DOMContentLoaded',function()  
 {  
 黑暗模式初始化（​​）；  
 });

Darkmode.js 文件

此示例从头到尾描述了迁移深色主题行为的功能。这是完整的脚本：

 功能暗模式初始化（​​）  
 {  
 let darkmodeSwitch = document.querySelector('header .darkmode');  
	  
 让暗模式Cookie = {  
 设置：功能（键，值，时间，路径，安全=假）  
 {  
 让过期=新日期（）；  
 expires.setTime(expires.getTime() + time);  
 var path = (typeof path !== 'undefined') ? pathValue = '路径=' + 路径 + ';' : '';  
 var 安全 = (安全) ? ';安全的' ： '';  
			  
 document.cookie = 键 + '=' + 值 + ';' + 路径 + 'expires=' + expires.toUTCString() + 安全；  
 },  
 获取：函数（）  
 {  
 让 keyValue = document.cookie.match('(^|;) ?darkmode=([^;]*)(;|$)');  
 返回键值？键值[2]：空；  
 },  
 删除：函数（）  
 {  
 document.cookie = '暗模式=;最大年龄=0；路径=/';  
 }  
 };  
	  
	  
 if(darkmodeCookie.get() == 'true')  
 {  
 darkmodeSwitch.classList.add('active');  
 document.body.classList.add('darkmode');  
 }  
	  
	  
 darkmodeSwitch.addEventListener('click', (event) => {  
 event.preventDefault();  
 event.target.classList.toggle('active');  
 document.body.classList.toggle('darkmode');  
		  
 if(document.body.classList.contains('darkmode'))  
 {  
 darkmodeCookie.set('darkmode','true',2628000000,'/',false);  
 }  
 别的  
 {  
 darkmodeCookie.remove();  
 }  
 });  
 }

现在让我们通过四个简单的步骤来看看这个过程。

步骤 1. 链接到按钮

首先，我们从 DOM 中截取 switch。

 let darkmodeSwitch = document.querySelector('header .darkmode');

一个东西 黑暗模式Cookie 包含三种方法。

  • 放 设置深色主题 cookie。

  • 得到 读取 cookie（如果存在）。

  • 消除 删除 cookie。

    让暗模式Cookie = {
    设置：功能（键，值，时间，路径，安全=假）
    {
    让过期=新日期（）；
    expires.setTime(expires.getTime() + time);
    var path = (typeof path !== 'undefined') ? pathValue = '路径=' + 路径 + ';' : '';
    var 安全 = (安全) ? ';安全的' ： '';

    document.cookie = 键 + '=' + 值 + ';' + 路径 + 'expires=' + expires.toUTCString() + 安全；
    },
    获取：函数（）
    {
    让 keyValue = document.cookie.match('(^|;) ?darkmode=([^;]*)(;|$)');
    返回键值？键值[2]：空；
    },
    删除：函数（）
    {
    document.cookie = '暗模式=;最大年龄=0；路径=/';
    }
    };

步骤 3 处理 CSS 类

方法 得到 目的 黑暗模式Cookie 允许您检查是否存在深色主题 cookie。如果是，则添加类 积极的 切换和上课 暗模式 进入身体 身体 .

 if(darkmodeCookie.get() == 'true')  
 {  
 darkmodeSwitch.classList.add('active');  
 document.body.classList.add('darkmode');  
 }

步骤 4管理交换机

这部分脚本向单选按钮添加了一个事件侦听器，以便您可以更改单选按钮本身和页面正文中的类。

在第六行代码中，我们检查是否 身体 班级 暗模式 在第四行发生的切换之后。如果是这样，设置cookie 暗模式 ，在此示例中将在一个月后到期（2,628,000,000 毫秒）。

最后一个参数 darmodeCookie.set() 第八行应该赋值 真的 如果页面是 SSL 加密的。对于本地测试，只需安装在那里 错误的 .第二个参数是值，这里只是用到了 真的 作为一个字符串。

如果需要删除 cookie，因为 身体 不包含类 暗模式 , 应用 darkmodeCookie.remove() .

 darkmodeSwitch.addEventListener('click', (event) => {  
 event.preventDefault();  
 event.target.classList.toggle('active');  
 document.body.classList.toggle('darkmode');  
  
 if(document.body.classList.contains('darkmode'))  
 {  
 darkmodeCookie.set('darkmode','true',2628000000,'/',false);  
 }  
 别的  
 {  
 darkmodeCookie.remove();  
 }  
 });

结论

通过这些简单的步骤，您可以使您的网站更加用户友好。为了获得更大的灵活性和控制力，您还可以设置类 暗模式 在 身体 使用 PHP，而不是 JavaScript。

另请阅读：

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

文章翻译 斯蒂芬·罗姆哈特 ： 在 CSS 和 vanilla JavaScript 中编写基于 cookie 的暗模式开关

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

本文链接：https://www.qanswer.top/5782/00210100

posted @   哈哈哈来了啊啊啊  阅读(42)  评论(0)  编辑  收藏  举报
相关博文：
· 暗模式切换功能（仅限 CSS）
· 暗模式切换功能（仅限 CSS）
· 网页html+css+js简单实现夜晚模式切换
· 也及夜间模式样式
· 常用Vue UI框架的主题切换
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示