hexo博客添加暗色模式
I recently redesigned my website. Here are 2 pictures of how it looked, for reference:
我最近重新设计了我的网站 。 下面是它的样子 ，以供参考2张图片：
I designed this website almost 1 year ago, and did many changes along the way, just as we do with any website.
我差不多是在1年前设计这个网站的，并且在此过程中进行了许多更改，就像我们对任何网站所做的一样。
Eventually I grew tired of the design: title is too big, too much space lost instead of showing the content right away, and so on.
最终，我对设计感到厌倦：标题太大，丢失了太多空间而不是立即显示内容，等等。
I sat down yesterday evening and started re-imagining the website, and I finished the redesign this morning:
我昨天晚上坐下来，开始重新设计网站，今天早上完成了重新设计：
Much better! Content, the most important thing, is more prominent.
好多了！ 最重要的是内容更加突出。
I used a monospaced font (Inconsolata) because as a programming blog it’s a nice one, despite the reduced readability and increased page size due to the font use, because I want that font on my site. I like it better, and since my site is a big part of my day to day activity, I wanted it to be what I want.
我使用等宽字体(Inconsolata)是因为它是一个不错的编程博客，尽管由于使用字体而导致可读性降低和页面大小增加，因为我希望在我的网站上使用该字体。 我更喜欢它，并且因为我的网站是我日常活动的重要组成部分，所以我希望它成为我想要的。
I just missed one thing: dark mode. As I was in the process of redesigning, I had the dark mode option in mind.
我只是错过了一件事： 黑暗模式 。 在进行重新设计时，我想到了暗模式选项。
How did I do it? First, I added the Moon Emoji ? in the sidebar, as a way to let people change the mode from light to dark.
我是怎么做到的？ 首先，我添加了月亮表情符号？ 在侧边栏中，这是让人们将模式从浅色更改为深色的一种方式。
Then, I added a JavaScript snippet that runs when it’s clicked. I just added it to the onclick event handler inline in the HTML, without going fancier:
然后，我添加了一个在单击时运行JavaScript代码段。 我只是将它添加到HTML的内联onclick事件处理程序中，而不用幻想：
<p> <a href="#" onclick="localStorage.setItem('mode', (localStorage.getItem('mode') || 'dark') === 'dark' ? 'light' : 'dark'); localStorage.getItem('mode') === 'dark' ? document.querySelector('body').classList.add('dark') : document.querySelector('body').classList.remove('dark')" title="Dark/light</p>This is the JavaScript that runs in the onclick:
这是在onclick中运行JavaScript：
localStorage.setItem('mode', (localStorage.getItem('mode') || 'dark') === 'dark' ? 'light' : 'dark'); localStorage.getItem('mode') === 'dark' ? document.querySelector('body').classList.add('dark') : document.querySelector('body').classList.remove('dark')It’s a bit convoluted, but basically I check if the mode property in the local storage is ‘dark’ (and defaults to dark if it’s not set yet, using the || operator), and I set the opposite of that in the local storage.
这有点令人费解，但基本上我会检查本地存储中的mode属性是否为'dark'(如果尚未设置，则使用||运算符默认为Dark)，然后在本地存储中设置与之相反的属性。
Then I assign the dark class to the body HTML element, so we can use CSS to style the page in dark mode.
然后，我将dark类分配给body HTML元素，因此我们可以使用CSS在深色模式下设置页面样式。
Another script runs as soon as the DOM loads, and checks if the mode is dark. If so, it adds the dark class to the body HTML element:
DOM加载后，另一个脚本立即运行，并检查模式是否为暗。 如果是这样，它将dark类添加到body HTML元素中：
document.addEventListener('DOMContentLoaded', (event) => { ((localStorage.getItem('mode') || 'dark') === 'dark') ? document.querySelector('body').classList.add('dark') : document.querySelector('body').classList.remove('dark')})Now if people change modes, their choice will be remembered next time they load the page.
现在，如果人们更改模式，那么下次加载页面时，他们的选择就会被记住。
Then I added a lot of CSS instructions to the CSS, all prefixed with body.dark. Like these:
然后，我在CSS中添加了许多CSS指令，所有指令都以body.dark 。 像这些：
body.dark { background-color: rgb(30,34,39); color: #fff;}body.dark code[class*=language-],body.dark table tbody>tr:nth-child(odd)>td,body.dark table tbody>tr:nth-child(odd)>th { background: #282c34}Now things should already be working! Here is my site in dark mode:
现在事情应该已经正常了！ 这是我的网站处于黑暗模式：
I added the dark class to the body element by default, to make dark mode the default:
我默认将dark类添加到body元素，以使深色模式成为默认设置：
<body class="dark"> ... </body>Why? First, I liked it better. Then, I made a poll on Twitter and people liked it better.
为什么？ 首先，我更喜欢它。 然后，我在Twitter上进行了一项民意调查，人们对此比较喜欢。
But also for a technical reason, a very simple one actually. I don’t store the user choice server-side, so I have no way to know the mode until the local storage is available.
但是出于技术原因，实际上是一个非常简单的原因。 我没有在服务器端存储用户选择的内容，因此在本地存储可用之前，我无法知道模式。
I could do that if the site was generated server-side, but it’s a static site, so I always serve the same page to everyone that requests it. Even if I got a cookie, I have no place to process it (on the flip side this means my pages load faster).
如果该站点是在服务器端生成的，那么我可以这样做，但是它是一个静态站点，因此我总是向请求它的每个人提供相同的页面。 即使我有一个cookie，也没有地方可以处理它(另一方面，这意味着我的页面加载速度更快)。
So when someone navigates to another page on my site, or loads the page for the first time on a second visit, I don’t want to show a bright page while I determine the mode. Maybe the visitor is coding in the middle of the night in a dark room.
因此，当某人导航到我网站上的另一个页面，或在第二次访问中首次加载该页面时，我不想在确定模式时显示明亮的页面。 也许访客在半夜里在暗室里编码。
I’d rather do that in light mode: show a dark page for a couple milliseconds and then turn it white again.
我宁愿在浅色模式下执行此操作：显示深色页面几毫秒，然后再次将其变白。
The Media Queries Level 5 specification, still in work in progress, contains a new prefers-color-scheme media feature. Safari Technology Preview on macOS already supports it and we can use it to tell if the user is browsing the page in dark or light mode:
仍在进行中的Media Queries Level 5规范包含一项新的prefers-color-scheme媒体功能。 macOS上的Safari Technology Preview已经支持它，我们可以使用它来判断用户是以暗还是亮模式浏览页面：
@media (prefers-color-scheme: dark) { body { background-color: black; color: white; }}@media (prefers-color-scheme: light) { body { background-color: white; color: black; }}Hopefully this is going to be stable in Safari soon, and in the future Chrome and Firefox will support it too.
希望这很快会在Safari中保持稳定，并且将来Chrome和Firefox也将支持它。
Originally published at flaviocopes.com.
最初发布于flaviocopes.com 。
翻译自: https://www.freecodecamp.org/news/how-i-added-dark-mode-to-my-website-33611d246425/
hexo博客添加暗色模式
2184
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
