后端开发教程 - Java、Spring Boot 实战 - msg200.com
黑暗模式：“最佳”方式（在我看来）
这篇博文为您提供了一个快速的 TL;DR，以最佳方式在您的网站中实现暗模式。
难度：初学者
那么，我所说的“最好”是指什么？
- 浏览器支持
- 表现
- 简单
但在我看来，有事实支持这一点。
---- 让我们直接进入正题： ----
实现暗黑模式的方法有很多种：
data-theme="theme"@media(prefers-color-scheme)关联- 单独的 CSS 文件（请不要走这条路）
- 类列表切换
我特意推荐这个data-theme方法。如果你懒得看其他的，可以点击这里。
为什么选择data-theme？：
- 令人惊叹的浏览器支持。
- 轻的。
- 干净的代码。
对于其他方法：
@media（首选配色方案）
如果您反对使用旧版浏览器，请使用 @media(prefers-color-scheme)。原因如下。
单独的 CSS 文件
拜托，为了开发者的利益，请不要使用这种方法。使用单独的 CSS 文件会对网页渲染速度产生负面影响。CSS 文件越多，意味着HTTP Requests需要发送更多请求来获取文件，从而降低渲染速度。
类列表切换
嗯……如果你有经验，你可能听说过这个classList.toggle方法。是的，它的工作原理和 完全一样data-theme。请放心使用，无需担心。
代码
解释完毕后，让我给你举个例子。
Codepen 示例
HTML
我使用 pug 来编写 HTML，但如果您不知道发生了什么：
<div id="container">
<div id="theme-text">Hi, I'm light theme</div>
<div id="theme-switch">Click me to change theme</div>
</div>
CSS
我使用 SCSS 作为预处理器；不用担心，我没有在这里添加任何 SCSS 代码。要访问与元素关联的属性，请使用方括号。在本例中，data-theme="dark"当元素值为“dark”时， 将被访问。
:root{
--color-bg:#faf7f0;
--color-font:#363636;
}
body[data-theme="dark"]{
--color-bg: #282930;
--color-font: #b1b3bd;
}
body{
background-color:var(--color-bg);
color:var(--color-font);
font-size:1.5rem;
transition:.2s background-color,.2s color;
}
#container{
display:flex;
align-items: center;
justify-content: center;
flex-direction:column;
margin-top:35vh;
}
#theme-switch{
border:1px var(--color-font) solid;
margin-top:1rem;
padding:1rem;
border-radius:1rem;
user-select:none;
cursor:pointer;
}
如果希望代码简洁，则需要使用变量。您可以使用以下语法创建变量来存储任何值：--+name:value
请确保在创建变量时:root避免出现作用域问题。
JS
这是原生 JavaScript。:) 注意我是怎么用这个localStorage.setItem方法的。这只适用于客户端浏览器。如果你想让它在任何客户端上对同一个用户都有效，请查看SSP。
const themeText = document.getElementById("theme-text")
const themeSwitch = document.getElementById("theme-switch")
if (window.localStorage.getItem("theme") === "dark"){
document.body.dataset.theme = "dark";
themeText.innerHTML = "Hi, I'm dark theme";
}
themeSwitch.addEventListener("click",function(){
if(document.body.dataset.theme !== "dark"){
document.body.dataset.theme = "dark"
themeText.innerHTML = "Hi, I'm dark theme"
window.localStorage.setItem("theme","dark")
}else{
document.body.dataset.theme = "light"
themeText.innerHTML = "Hi, I'm light theme"
window.localStorage.setItem("theme","light")
}
})
在 JS 中用来访问data-theme中的属性。bodydataset.theme
- - - - -结尾 - - - - -
好了！这样你就能轻松添加暗黑模式，不会后悔。不过，请记住，这只是模块的一小部分——至少让我来指导你设计。
<3
鏂囩珷鏉ユ簮锛�https://dev.to/timmingau/dark-mode-the-best-way-imo-15cn