简介
你可能已经注意到，在许多网站上，你现在可以在黑暗和光明主题之间切换。这通常是使用css自定义属性(也称为css variables).在本教程中，您将看到如何仅使用CSS和少量的JavaScript就可以实现类似的功能。要了解有关此代码如何工作的更多信息，请访问Javascript](https://www.digitalocean.com/community/tutorial_series/how-to-code-in-javascript)或HTML.查看我们的系列内容
步骤1&mdash；创建css变量
CSS中自定义属性的强大之处在于，与使用CSS预处理器定义的变量不同，这些值是动态的；它们的值可以随时更改或覆盖以响应用户输入。当变量的值被更改或覆盖时，使用该变量的所有元素将自动反映更改。
首先，你必须做一些工作，并提取所有的颜色，你想在你的CSS自定义属性使用。假设您从以下样式开始：
1[label style.css]
2body {
3 background: white;
4 color: #555;
5}
6
7a, a:link {
8 color: #639A67;
9}
10a:hover {
11 color: #205D67;
12}
然后，您将按如下方式定义自定义属性：
1[label style.css]
2:root {
3 --bg: white;
4 --text-color: #555;
5 --link-color: #639A67;
6 --link-hover: #205D67;
7}
准备就绪后，您现在可以将您的CSS规则更改为如下所示：
1[label style.css]
2body {
3 background: var(--bg);
4 color: var(--text-color);
5}
6
7a, a:link {
8 color: var(--link-color);
9}
10a:hover {
11 color: var(--link-hover);
12}
应用主题涉及到向Body元素添加一个类，因此您将在该类名下定义主题的颜色。在这里，我们将把这门课称为‘Funky’。只需确保为应更改的所有颜色定义覆盖颜色：
1[label style.css]
2.funky {
3 --bg: hotpink;
4 --text-color: white;
5 --link-color: #B793E6;
6 --link-hover: #3532A7;
7}
Step 2&mdash；为旧版浏览器添加回退
对css自定义属性的支持非常good，，但您很可能希望包含对使用较旧浏览器的用户的后备功能。
假设我们有一个元素，它应该具有线性渐变背景，并将颜色定义为自定义属性。您首先提供硬编码的颜色，较旧的浏览器将忽略它们不理解的版本：
1[label style.css]
2background: linear-gradient(to right, #FFFB85, #5A3662); /* our fallback */
3background: linear-gradient(to right, var(--top-grad1), var(--top-grad2));
第三步&切换我们的主题
我们只需要极少量的JavaScript就可以在元素上添加事件侦听器，该元素充当两个主题之间的切换按钮。
在这里，切换按钮有Togger-Theme类，我们使用Docent.querySelector来获取对该元素的引用：
1[label app.js]
2let toggle = document.querySelector('.toggle-theme');
3
4toggle.addEventListener('click', function(e) {
5 e.preventDefault();
6
7 if (document.body.classList.contains('funky')) {
8 // Turning the theme off:
9 document.body.classList.remove('funky');
10 // Reverse logic on the button text, so that users can turn
11 // the theme back on:
12 toggle.innerText = 'Turn theme on';
13 } else {
14 document.body.classList.add('funky');
15 toggle.innerText = 'Turn theme off';
16 }
17});
这样就可以在两个主题之间切换。我们可以做得更好，同时还可以向localStorage添加/删除一个项目，以便在页面加载时自动应用我们的主题：
1[label app.js]
2let toggle = document.querySelector('.toggle-theme');
3
4// Turn the theme off if the 'funky' key exists in localStorage
5if (localStorage.getItem('funky')) {
6 document.body.classList.add('funky');
7 toggle.innerText = 'Turn theme off';
8}
9
10toggle.addEventListener('click', function(e) {
11 e.preventDefault();
12
13 if (document.body.classList.contains('funky')) {
14 document.body.classList.remove('funky');
15 toggle.innerText = 'Turn theme on';
16 localStorage.removeItem('funky');
17 } else {
18 document.body.classList.add('funky');
19 toggle.innerText = 'Turn theme off';
20 localStorage.setItem('funky', true);
21 }
22});
你可以使用这个小的代码片段和css变量来创建这样的主题网站，有暗模式、亮模式等等。
结论
在本教程中，您创建了一个具有暗和亮模式的主题网站。要了解有关此代码如何工作的更多信息，请访问Javascript](https://www.digitalocean.com/community/tutorial_series/how-to-code-in-javascript)或HTML.查看我们的系列内容