[Web开发]在网页中切换深色/浅色主题

乱码奇糟

已于 2023-07-20 20:25:27 修改

阅读量531

点赞数

分类专栏：软件开发文章标签： html css javascript web

于 2023-07-20 18:32:51 首次发布

本文链接：https://blog.csdn.net/weixin_48473666/article/details/131836015

版权

软件开发专栏收录该内容

27 篇文章 0 订阅

订阅专栏

在网页中切换深色/浅色主题。

HTML文件：

<html><head><link rel="stylesheet" href="main.css"></head> 【1】
<body class="light-theme"> 【2】
    <button class="btn"">Switch</button> 【3】
    <script src="app.js"></script> 【4】
</body></html>

解释：
【1】<head>中嵌入css文件。
【2】<body> tag中用class指定当前的theme。
【3】<button>tag中用class声明的类型绑定css。
【4】在<body>最后引入js脚本，先显示页面，然后加载js脚本。

CSS文件：

.light-theme {【1】
    --ft: #000; --bg: #fff; } 【2】
.dark-theme {
    --ft: #fff; --bg: #000; } 【3】
.btn {【4】
    color: var(--ft); background-color: var(--bg); }

解释：
【1】用. + light-theme：说明这条规则应用于class == "light-theme"的对象。
【2】用--定义变量ft和bg，文字的颜色是黑色（#000），背景的颜色是白色（#fff）。
【3】dark-theme中文字的颜色和背景的颜色与light-theme的配色方案相反。
【4】按钮的class是btn，使用ft的颜色值绘制文字，使用bg的颜色值绘制背景。

JS文件：

const button = document.querySelector(".btn");【1】
button.addEventListener("click", function () {【2】
  document.body.classList.toggle("light-theme");【3】
  document.body.classList.toggle("dark-theme");【4】
});

解释：
【1】找到类型为btn的按钮对象。
【2】添加一个匿名函数对象来处理click按钮的事件。
【3】toggle("light-theme")加上或者删除对象的light-theme属性
【4】toggle("dark-theme")加上或者删除对象的dark-theme属性

拓展1：
在这个例子中，下面的代码也可以正常运行：

const button = document.querySelector(".btn");
button.addEventListener("click", function () {
  document.body.classList.toggle("dark-theme");
});

虽然可以运行，但是严重依赖现在的实现。感兴趣的同学可以想想为什么？

拓展2：
如果有很多class选项，是不是要写很多行toggle？

const all_classes = ['class1', 'class2', 'class3', ... 'classN'];
function toggleClasses{
  classes.forEach(className => document.body.classList.toggle(className));
}