简单 JavaScript 主题切换
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
隆重推出 ezToggle
上周末我创建了ezToggle——一种使用 HTML、CSS 和基本 JavaScript 为您的网站添加主题切换的简单方法。
这是我第一个 JavaScript 成功案例，但对于那些正在寻找一种简单的方法来为您的网站添加浅色/深色主题切换的人来说，这可能就是答案！
最重要的是，它只包含极少的 JavaScript，因此任何人都可以使用它。
var body = document.querySelector('body');
var bodyClass = body.classList;
var themeToggle = document.querySelector('#theme-toggle');
var footer = document.querySelector('.footer');
var light = document.querySelector('.light');
var dark = document.querySelector('.dark');
themeToggle.addEventListener('click', () => {
body.classList.toggle("light");
body.classList.toggle("dark");
themeToggle.classList.toggle("btn-light");
themeToggle.classList.toggle("btn-dark");
footer.classList.toggle("footer-light");
footer.classList.toggle("footer-dark");
});
那么，如果你的页脚颜色没有变化，你可以从这段代码中删掉三行——真正的秘诀在于使用 CSS 变量。接下来，我们来看看如何在你的网站中实现这一点！
入门
首先，您需要 CSS 和 JS 文件，您可以在GitHub 仓库中找到它们。
我最近发现了 CSS 变量，非常喜欢它们，并且知道它们非常适合这个项目——以及未来所有的项目。
如果你还不了解，CSS变量是一种CSS属性，你可以定义一次，然后在整个文档中调用它。这使得它非常适合用于颜色、过渡效果、边距/内边距等等！任何你在CSS中重复使用的内容都可以转换成一个变量。
这对于主题来说尤其有用，因为您只需设置一次变量中的颜色，整个文档中的颜色就会随之改变。
/*--------------------Reusable Variables--------------------*/
:root {
/*--------------------Light Theme Variables (Default)--------------------*/
--light-theme-background-color: #eee;
--light-theme-darker-background-color: #ccc;
--light-theme-text-color: #333;
--light-theme-link-color: #ff6347;
--light-theme-link-hover-color: #fa2600;
}
关于CSS变量的更多内容
如果你看一下下面的代码，你会发现我只用了 3 个属性就定义了浅色主题。
.light {
background: var(--light-theme-background-color);
color: var(--light-theme-text-color);
transition: var(--theme-change-timing);
}
无论我把它放在文档的哪个位置，var(--light-theme-text-color);它都会采用我们在“为什么我要用两个类来定义主题？ ”#fff;中定义的相同颜色。因为我可以简单地将该类添加到标签中，然后就实现了主题更改。--light-theme-text-color: #333;.light.darkbody
设置
HTML
首先，我们需要给body标签添加一个灯光类别：
<body class="light">
这会将默认主题设置为我们类中定义的主题.light。如果您希望默认主题为深色，只需将其更改为即可<body class="dark">。
CSS
设置 CSS 需要几个步骤。第一步是在:root伪类中定义 CSS 变量。这样做是为了避免在页面上的不同元素中重复定义变量。声明变量后，:root每个元素都可以访问它们。
/*--------------------Reusable Variables--------------------*/
:root {
/*--------------------Light Theme Variables (Default)--------------------*/
--light-theme-background-color: #eee;
--light-theme-darker-background-color: #ccc;
--light-theme-text-color: #333;
--light-theme-link-color: #ff6347;
--light-theme-link-hover-color: #fa2600;
/*--------------------Dark Theme Variables--------------------*/
--dark-theme-background-color: #333;
--dark-theme-darker-background-color: #111;
--dark-theme-text-color: #eee;
--dark-theme-link-color: #00fa9a;
--dark-theme-link-hover-color: #00955b;
/*--------------------Other Variables--------------------*/
--link-hover-timing: all 0.25s ease-in-out;
--theme-change-timing: all 1s ease-in-out;
}
接下来，我为每个主题创建了一些类。这包括主体的通用.light主题.dark，以及和btn-light、.btn-dark和.footer-light和.footer-dark。
/*--------------------Light Theme Styles (Default)--------------------*/
.light {
background: var(--light-theme-background-color);
color: var(--light-theme-text-color);
transition: var(--theme-change-timing);
}
.light a {
color: var(--light-theme-link-color);
}
.light a:hover {
color: var(--light-theme-link-hover-color);
}
.footer-light {
background: var(--light-theme-darker-background-color);
}
请记住，将您创建的任何类应用到 HTML 文件中的相应元素，以便它们都能正确应用主题。
JavaScript
首先，我们需要定义变量。你应该在文件顶部定义变量，这样，即使在主题切换函数之外调用这些变量，它们也能被其他函数使用。
var body = document.querySelector('body');
var bodyClass = body.classList;
var themeToggle = document.querySelector('#theme-toggle');
var footer = document.querySelector('.footer');
var light = document.querySelector('.light');
var dark = document.querySelector('.dark');
如果您选择不设置页脚样式，可以直接将其删除。但是，对于 ezToggle，我将页脚颜色设置得比页面其他部分更深，因此我必须在这里定义它，以便在以下函数中调用它：
themeToggle.addEventListener('click', () => {
body.classList.toggle("light");
body.classList.toggle("dark");
themeToggle.classList.toggle("btn-light");
themeToggle.classList.toggle("btn-dark");
footer.classList.toggle("footer-light");
footer.classList.toggle("footer-dark");
});
该函数监听网站上“主题切换”按钮（显示为“更改主题”的按钮）的点击事件。
点击按钮后，它首先识别其所附加元素的类名。.toggle然后，它会将指定的类名切换（没错，就是这个意思）到该元素上。它可以在浅色和深色类名之间切换。
总结
以下是将ezToggle应用到您的网站所需的步骤概要：
- 在 HTML 中为 `body` 元素应用浅色或深色类
- 在 `:root` 伪类中定义 CSS 变量。确保根据主题需要更改、添加或删除任何颜色。
- 创建、添加或删除主题及任何需要主题化的物品所需的任何类。 请务必将这些类添加到 HTML 文件中的相应元素。
- 定义 JavaScript 变量
- 尽情享受主题切换的乐趣吧！
希望您喜欢并理解我的第一篇技术博客。我期待未来能写更多这样的博客。
如果您在使用ezToggle时遇到任何问题，请随时通过DEV或Twitter与我联系。