后端开发教程 - Java、Spring Boot 实战 - msg200.com
使用 CSS 变量创建暗/亮模式切换
添加 CSS
添加 HTML“切换开关标记”
添加 JavaScript
资源
让用户能够根据自己的喜好自定义界面，对用户体验来说意义重大。在这里，我们将为用户提供一个简单的开关，方便他们在暗黑模式和亮黑模式之间切换，并且我们还会尝试记住他们的偏好，以便下次访问时使用。
让我们开始吧！
如果您没有自己的网站并希望添加此功能，请使用此演示网站进行操作。
添加 CSS
我们将添加 CSS 自定义属性（也称为 CSS 变量），以便在整个文档中引用和修改它们。如果您想了解更多关于自定义属性的信息，可以访问 MDN。
以下是 tldr; 版本 -
自定义属性（有时也称为 CSS 变量或级联变量）是由 CSS 作者定义的实体，其中包含可在整个文档中重复使用的特定值。它们使用自定义属性符号设置（例如，--main-color: black;），并使用 var() 函数访问（例如，color: var(--main-color);）。
首先，我们将轻量级或默认模式的 CSS 变量添加到:root伪类中。它与文档树中的根元素（通常是<html>标签）匹配。我们之所以使用:root伪类，是因为我们希望全局使用这些变量。
:root {
--primary-color: #302AE6;
--secondary-color: #536390;
--font-color: #424242;
--bg-color: #fff;
--heading-color: #292922;
}
其次，我们将添加暗模式 css 变量。
[data-theme="dark"] {
--primary-color: #9A97F3;
--secondary-color: #818cab;
--font-color: #e1e1ff;
--bg-color: #161625;
--heading-color: #818cab;
}
是什么[data-theme="dark"]？这意味着我们引用了一个名为“dark”的data属性data-theme。我们稍后会找到它的用途。
然后，我们可以在样式表中引用这些变量，如下所示：
body {
background-color: var(--bg-color);
color: var(--font-color);
/*other styles*/
.....
}
h1 {
color: var(--secondary-color);
/*other styles*/
.....
}
a {
color: var(--primary-color);
/*other styles*/
.....
}
添加 HTML“切换开关标记”
这本质上只是一个复选框，但我们会添加一些额外的标记来使其像切换开关一样具有样式。我的样式参考了Codepen 中的样式。
<div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox" />
<div class="slider round"></div>
</label>
<em>Enable Dark Mode!</em>
</div>
/*Simple css to style it like a toggle switch*/
.theme-switch-wrapper {
display: flex;
align-items: center;
em {
margin-left: 10px;
font-size: 1rem;
}
}
.theme-switch {
display: inline-block;
height: 34px;
position: relative;
width: 60px;
}
.theme-switch input {
display:none;
}
.slider {
background-color: #ccc;
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: .4s;
}
.slider:before {
background-color: #fff;
bottom: 4px;
content: "";
height: 26px;
left: 4px;
position: absolute;
transition: .4s;
width: 26px;
}
input:checked + .slider {
background-color: #66bb6a;
}
input:checked + .slider:before {
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
添加 JavaScript
最后一步是添加一些 JavaScript 代码，将所有内容整合在一起。
我们手头有 3 个任务：
- 添加事件处理程序以相应地处理切换开关的选中/取消选中事件
- 存储用户偏好以供将来访问
- 在网站加载时检查已保存的用户偏好设置（如果有）
添加事件处理程序
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
function switchTheme(e) {
if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
}
else {
document.documentElement.setAttribute('data-theme', 'light');
}
}
toggleSwitch.addEventListener('change', switchTheme, false);
请记住，data-theme我们在上面的 CSS 中引用的属性，这就是它被添加到我们的根元素的地方。
存储用户偏好以供将来访问
我们将使用浏览器的 localStorage 来存储用户偏好设置。
让我们修改一下我们的switchTheme函数：
function switchTheme(e) {
if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
localStorage.setItem('theme', 'dark'); //add this
}
else {
document.documentElement.setAttribute('data-theme', 'light');
localStorage.setItem('theme', 'light'); //add this
}
}
在网站加载时检查已保存的用户偏好设置（如果有）
我们将检查主题偏好设置是否已保存，如果是，我们将相应地
设置我们的data-theme属性
- 选中/取消选中我们的切换开关复选框
const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
if (currentTheme) {
document.documentElement.setAttribute('data-theme', currentTheme);
if (currentTheme === 'dark') {
toggleSwitch.checked = true;
}
}
就是这样！查看下面的完整演示。
我最近将它添加到我的网站，所以也许可以检查一下！
专业提示：如何确定配色方案？
我的建议是保持与原色或品牌色相同的色谱，并以此为基础生成调色板。在暗色模式下，使用调色板中最深的色调作为背景色，较浅的色调作为字体颜色。我使用这个色调生成器来生成我的调色板。 即使你最终没有使用生成的确切颜色，它仍然是一个不错的起点。我甚至还对最终使用的颜色进行了微调。