在本教程中，我们将讨论如何使用 css 变量和一行原生 javascript 在网站上实现不同的配色方案。
首先，我们将实现一个简单的明暗模式切换开关。然后我们将对此进行扩展以实现尽可能多的主题；浅色模式、深色模式、90 年代霓虹灯模式，应有尽有！
我们还将根据用户的偏好使用媒体查询来显示暗模式或亮模式，并使用本地存储来记住他们选择了我们的哪种配色方案。
亮/暗模式拨动开关演示
让我们看一下明暗模式切换开关的演示。我们将首先构建它，然后对其进行扩展。
See the Pen Dark/Light Mode with CSS variables by Envato Tuts+ (@tutsplus) on CodePen.
1.如何创建暗模式切换
html
首先，我们将初始化两个按钮以允许我们控制明暗模式。
<div class="toggle-container"> <button class="theme-btn light" title="Light mode"> <!--sun icon--> </button> <button class="theme-btn dark" title="Dark mode"> <!--moon icon--> </button> </div> |
我使用这些天气图标代表太阳和月亮来代表光明和黑暗的主题，但您可以将它们替换为您喜欢的任何内容。我还设置了title 属性来为屏幕阅读器提供上下文。
CSS
我们的切换实现的大部分工作都是使用 CSS 完成的。我们可以对按钮进行样式设置以实现圆形图标效果：
.theme-btn {
width: 3em;
height: 3em;
padding: 0.5em;
border-radius: 50%;
cursor: pointer;
border: none;
background-color: transparent;
}
.theme-btn img {
height: 100%;
width: 100%;
object-fit: cover;
}
我们使用CSS 自定义属性定义我们的主题颜色。
“自定义属性[...] 包含要在整个文档中重复使用的特定值。它们使用自定义属性表示法（例如，--main-color: black;）进行设置，并使用 函数（例如， ）进行访问”- MDNvar()color: var(--main-color);
自定义属性通常在:root伪类内部定义，它允许我们定位<html> 元素标签。:root在此示例中，我们为使用类名称 定义了默认、浅色和深色主题的变量 。
:root,
:root.light {
--bg-color: #fff;
--text-color: #123;
}
:root.dark {
--bg-color: #121212;
--text-color: #45ADFE;
}
现在我们将我们的自定义属性分配给其他元素——这就是允许颜色根据 :root类而改变的原因。我们可以body像这样分配颜色：
body {
background-color: var(--bg-color);
color: var(--text-color);
}
body 标签根据分配给:root.
JavaScript
在这一点上，我们可以使用 javaScript 来确定:root标签的类，并且正如所承诺的，我们只需要一行：
| const setTheme = theme => document.documentElement.className = theme; |
该setTheme函数将root元素的类设置为参数theme。
我们可以将此函数传递给我们的按钮，因此更新后的 HTML 如下所示：
<div class="toggle-container">
<button class="theme-btn light" onclick="setTheme('light')" title="Light mode">
<!--sun icon-->
</button>
<button class="theme-btn dark" onclick="setTheme('dark')" title="Dark mode">
<!--moon icon-->
</button>
</div>
单击浅色按钮将 HTML 类设置为light，单击深色按钮将 HTML 类设置为dark。
根据单击的按钮，我们的 HTML 元素会发生以下情况：
body 标签的样式如下所示：
有了这个，我们已经实现了在明暗主题之间切换所需的一切！
See the Pen Dark/Light Mode with CSS variables by Envato Tuts+ (@tutsplus) on CodePen.
2.处理基于颜色主题的样式
由于这个实现，我们可以根据 HTML 元素的类名来选择不同的元素样式。在我们的演示中，我们一次只显示一个按钮，因此我们可以根据选择的类隐藏另一个按钮。这是 CSS 的样子：
.theme-btn.light {
display: none;
}
.dark .theme-btn.light {
display: block;
background-color: #fff;
}
.dark .theme-btn.dark {
display: none;
}
这样，当父元素有 class 时，我们显示亮按钮并隐藏暗按钮dark。
3.更多自定义属性
CSS 自定义属性不仅限于颜色，我们可以更改从字体大小到背景图像的所有内容。这是一个演示，我们使用切换开关更改字体样式和背景图像。
See the Pen Background Toggle by Envato Tuts+ (@tutsplus) on CodePen.
使用的图片：卷发微笑的年轻女子和千禧一代的朋友在晚上点燃烟火。
我们只需要更新 CSS，使它看起来像：
:root,
:root.light {
--bg-color: #d6e8f5;
--text-color: #0a1c29;
--bg-url: url(//image-url);
--font-family: 'Fredoka One', cursive;
}
:root.dark {
--bg-color: #0a1c29;
--text-color: #45ADFE;
--bg-url: url(//image-url);
--font-family: 'Alfa Slab One', cursive;
}
body {
background-image: var(--bg-url);
background-size: cover;
color: var(--text-color);
font-family: var(--font-family);
}
4.多种配色方案
现在我们已经实现了亮/暗模式切换，我们可以继续扩展它以创建我们想要的尽可能多的配色方案。
对于这种方法，我们创建了一个下拉菜单，允许您为页面选择 6 个不同的主题。看一下演示：
See the Pen Color theme dropdown by Envato Tuts+ (@tutsplus) on CodePen.
HTML
在这个例子中，我们使用一个select元素来创建下拉菜单并将主题作为选项传递给选择。选项的值是我们将作为类传递给 HTML 元素的值。
<select name="theme-select" id="theme-select">
<option value="light">Light</option>
<option value="dark">Dark</option>
<option value="blue">Blue</option>
<option value="pink">Pink</option>
<option value="space">Space</option>
<option value="nyan">Nyan</option>
</select>
CSS
我们将:root使用类名为不同的主题创建变量。
:root,
:root.light {
--bg-color: #fff;
--text-color: #123;
}
:root.dark {
--bg-color: #121212;
--text-color: #696d7d;
}
:root.blue {
--bg-color: #05396B;
--text-color: #E7F1FE;
}
:root.pink {
--bg-color: #ffcad4;
--text-color: #e75480;
}
:root.space {
--bg-color: #000;
--text-color: #f2bd16;
--bg-url: url(//space);
--font-family: 'Press Start 2P', cursive;
}
:root.nyan {
--bg-color: #013367;
--text-color: #fff;
--bg-url: url(//nyan);
--font-family: 'Comic Neue', cursive;
}
我们还可以设置 select 标签的样式以使用变量而不是默认样式：
select {
padding: 0.25rem 0.75rem;
font-size: 1.25rem;
font-family: inherit;
background-color: var(--bg-color);
color: var(--text-color);
border-radius: 0.25rem;
}
那么我们的体型是这样的：
body { margin: 0; background-color: var(--bg-color); background-image: var(--bg-url); color: var(--text-color); font-family: var(--font-family, "Open Sans", sans-serif); } |
注意：我们也可以将备用值传递给 CSS 变量，因此设置属性 font-family: var(--font-family, "Open Sans", sans-serif 允许浏览器设置 font-family 属性，就"Open Sans", sans-serif好像 CSS 变量--font-family未定义一样。
JavaScript
最后，我们更新我们的 JavaScript 以检测何时从 select 元素中选择了一个选项。
const setTheme = theme => document.documentElement.className = theme;
document.getElementById('theme-select').addeventListener('change', function() {
setTheme(this.value);
});
我们以选择元素为目标并将所选值setTheme作为根类传递。
这就是我们需要的所有 JavaScript，我们可以通过在 CSS 中包含更多 HTML 选项和 :root 样式来继续拥有尽可能多的主题。
5.根据用户喜好设置主题
我们还可以根据用户系统的偏好来决定是设置亮模式还是暗模式。我们可以使用prefers-color-scheme媒体查询来检测用户喜欢的配色方案。
“ prefers-color-schemeCSS 媒体功能用于检测用户是否请求了浅色或深色主题。” -MDN _
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #121212;
--text-color: #45ADFE;
}
}
在媒体查询中，如果用户的系统设置为深色主题，我们将默认:root变量设置为深色模式的颜色。
6.将用户选择存储在本地存储中
另一个功能是将用户选择的主题存储在本地存储中，因此页面在每次访问时默认采用选择的主题。我们可以修改我们的setTheme函数以将选定的选项存储在本地存储中。
const setTheme = (theme) => {
document.documentElement.className = theme;
localstorage.setItem('theme', theme);
}
要在页面加载时加载保存的主题，我们可以创建一个getTheme从 localStorage 获取主题项的函数，并在脚本加载时调用该函数：
const getTheme = () => {
const theme = localStorage.getItem('theme');
theme && setTheme(theme);
}
getTheme();
结论
总而言之，我们可以通过以下方式创建主题选择器：
:root为使用 CSS 变量设置主题颜色
使用 JavaScript 更改根类。
在相应的 HTML 元素中调用函数。
有了这个，我们创建了一个功能齐全的主题选择器，它可以保存用户选项并考虑他们的偏好。
- html
- CSS
- JavaScript
- HTML
- JavaScript
![如何删除Word中的空白页[4种简单方法]](https://www.weixiaolive.com/en/zb_users/upload/2023/07/20230702124855168827333590644.png "如何删除Word中的空白页[4种简单方法]")
