在你的网站上采用黑暗模式的更好方法
黑暗模式似乎已经在这里停留。最初，开发人员在他们的代码编辑器中使用，但现在它到处都是，从手机、台式机，现在甚至是网络。支持黑暗模式正越来越多地从一个不错的选择变成一个必须的选择。当然，这取决于你的利基市场，但如果你在这里，你有可能想在你的网站或为你的客户实施黑暗模式。
说到网站的黑暗模式，网上有多种方法，我想和你谈谈两种不同的方法，一种是最容易实现的，第二种是我的首选，也是我在livecodestream.dev上实现黑暗模式时实际使用的方案。
让我们从第一个方案开始。
几行代码中的黑暗模式
第一个方案是通过使用 "黑暗 "魔法来实现的：p，撇开玩笑不谈，它非常简单和优雅，而且只由一行CSS组成:
html[data-theme='dark'] {
background: #000;
filter: invert(1) hue-rotate(180deg)
}
你可能想知道这怎么能行得通，你的怀疑可能是对的，但它确实是这样。在我们讨论为什么我不太喜欢这个选项之前，让我们先看看它的实际效果。
从例子中可以看出，它工作得非常好，但有一个问题，它也在倒置图片。这是因为过滤属性还适用于图片、背景和边框。现在，这可以很容易地通过避免图像上的变化来解决（或者更好地说，通过倒置反转来解决）:
html[data-theme='dark'] {
background: #000;
filter: invert(1) hue-rotate(180deg)
}
html[data-theme='dark'] img {
filter: invert(1) hue-rotate(180deg)
}
很好！但所有的东西都过渡得很突然，让我们用一些漂亮的过渡和一些颜色在这里和那里使它更漂亮:
html {
transition: color 300ms, background-color 300ms;
}
html[data-theme='dark'] {
background: #000;
filter: invert(1) hue-rotate(180deg)
}
html[data-theme='dark'] img {
filter: invert(1) hue-rotate(180deg)
}
很好!它就是有效的。现在，并不总是会看起来很好，在某些情况下，它可能看起来有点奇怪，我们可能希望对每种颜色有更多的控制。
使用CSS变量的黑暗模式
这是我在我的网站上使用的技术，效果很好。CSS允许定义自定义属性（变量），这是可以在CSS中定义特定值并在整个网站中重复使用的实体。你可以在MDN文档中找到详细的信息，然而，我们将在这里快速回顾如何创建一个变量以及如何使用它:
:root {
--my-var: blue;
}
element {
color: var(--my-var);
}
很简单，为了命名一个变量，我们需要在变量名称前加上-- ，而为了使用它，我们要使用函数var() 。
现在让我们回到我们的方案，并尝试用这种方式来实现黑暗模式:
html {
--background-primary: #fff;
--color-primary: #333;
}
html[data-theme='dark'] {
--background-primary: #030303;
--color-primary: #ccc;
}
html {
transition: color 300ms, background-color 300ms;
background: var(--background-primary);
color: var(--color-primary);
}
h1, h2, p {
color: var(--color-primary);
}
这要麻烦得多，现在我们需要为我们网站上使用的每个元素指定我们想要的文本和背景颜色，否则，它将无法工作。但是，你可以完全控制正在发生的事情，而且你可以为标题、按钮、呼出等创建不同的变量。
让我们在一个活生生的例子上看看这个。
现在，这是我喜欢的黑暗模式。到目前为止，我们已经解释了CSS方面的事情，但我们也将在JavaScript代码上下功夫，以进行切换，甚至将其保存在本地存储中，所以用户下次进入网站时，我们会记住他的偏好。
主题切换逻辑
现在让我们来研究使切换成为可能的JS。实际上，这也是非常简单的:
const htmlEl = document.getElementsByTagName('html')[0];
const toggleTheme = (theme) => {
htmlEl.dataset.theme = theme;
}
我们到目前为止做了什么？主题的工作方式是在HTML元素上应用一个数据属性，为此我们需要在变量htmlEl ，然后最后我们有一个函数，接收一个主题名称并改变属性。
但我们也要确保我们的变化被存储在浏览器上，这样我们就能记住用户的偏好，以便他/她下次访问我们的网站。为此，我们将使用localStorage API:
// Capture the current theme from local storage and adjust the page to use the current theme.
const htmlEl = document.getElementsByTagName('html')[0];
const currentTheme = localStorage.getItem('theme') ? localStorage.getItem('theme') : null;
if (currentTheme) {
htmlEl.dataset.theme = currentTheme;
}
// When the user changes the theme, we need to save the new value on local storage
const toggleTheme = (theme) => {
htmlEl.dataset.theme = theme;
localStorage.setItem('theme', theme);
}
完成了!让我们看看它的实况。
结论
今天我们讨论了启用黑暗模式的2个选项，然而，还有更多的选项是人们非常有创意地实现这些结果的。如果你有你认为更好的解决方案，请发给我，我将把它添加到帖子中，与其他人分享（并适当提及作者）。
我希望你今天能学到一些新东西，并感谢你的阅读!
