hexo博客添加暗色模式_我如何向网站添加暗模式

hexo博客添加暗色模式

同一个网站，两种不同的配色方案 (Same website, two different color schemes)

Last year I made it a point to redesign my website from scratch. I wanted something simple and minimalist looking that clearly stated what this was — a portfolio website.

去年，我特别指出了从头开始重新设计网站的重要性。我想要一个简单而简约的外观，清楚地说明这是什么-一个投资组合网站。

After I rebuilt my website from the ground up it seemed like everywhere I turned there was another article about adding a dark mode to your website.

从头开始重新构建网站后，似乎到处都是转弯，还有另一篇关于向您的网站添加暗模式的文章。

At first I didn’t think it would make that big of a difference because, while I am partial to darker colors, I felt like my website was a good balance between bright, fun colors and darker fonts.

起初我不认为这会带来太大的改变，因为虽然我偏爱深色，但我觉得我的网站在明亮，有趣的色彩和深色字体之间取得了很好的平衡。

I read some of the articles I mentioned earlier and the more I thought about it the more I decided to go for it.

我读了我之前提到的一些文章，对它的思考越深，我决定就越去追求它。

I took some inspiration from Flavio Copes who wrote a terrific article on this very subject. Unlike what Flavio decided to do with his site, I didn’t add the user’s choice to local storage.

我从弗拉维奥·科普斯(Flavio Copes)那里获得了一些启发，他在这个主题上写了一篇很棒的文章。与Flavio决定使用其网站不同，我没有将用户的选择添加到本地存储中。

This is due, in part, to the differences between our sites. I have a static site and there are no redirects/separate pages aside from the blog which is on a different platform so users generally won’t be refreshing the page. It is a neat option and one that I may add in later on.

这部分是由于我们站点之间的差异。我有一个静态网站，除了博客(位于另一个平台上)之外，没有重定向/单独的页面，因此用户通常不会刷新页面。这是一个很好的选择，稍后我可以添加。

Ok, let’s dig into the nuts and bolts of how I accomplished my dark mode toggle.

好的，让我们深入研究如何完成黑暗模式切换。

代码 (The Code)

The code to achieve this was fairly simple. I took the same approach as Flavio did and added the style changes through CSS. I had to take a few more steps because I have an image on my landing page.

实现此目的的代码非常简单。我采用了与Flavio相同的方法，并通过CSS添加了样式更改。我必须再执行几步，因为我的目标网页上有一张图片。

I had to use the !important flag on some of the rules because they were not being applied properly. This was the easiest approach to implement and I know it’s not advised to use this flag so I’ll be looking for an alternative in the near future.

我必须在某些规则上使用！important标志，因为它们未正确应用。这是最简单的实现方法，我知道不建议使用此标志，因此我会在不久的将来寻找替代方法。

Here is the JavaScript I used to get my toggle switch working correctly:

这是我用来使切换开关正常工作JavaScript：

I start by selecting my div with an id of light-dark-mode-container and adding an event listener to it.

我首先选择ID为light-dark-mode-container div ，然后向其添加事件监听器。

Next, I set my variables of everything, which selects all content on the page, and projectTiles because this class belongs to a particular set of overlays I do not want to have a background of a solid color.

接下来，设置我的everything变量，该变量将选择页面上的所有内容，并选择projectTiles因为此类属于特定的一组叠加层，所以我不想使用纯色背景。

Next, since I’m using querySelectorAll which returns a static NodeList, I loop over all of the elements within both NodeLists and either toggle the class dark or completely remove it from the elements returned by the variable projectTiles.

接下来，由于我使用的是返回静态NodeList的 querySelectorAll ，因此我遍历了两个NodeList中的所有元素，然后将类切换为dark或将其从变量projectTiles返回的元素中完全删除。

What I’m left with is a container at the top of my website with a toggle switch that allows the user to toggle between light and dark mode.

我剩下的是网站顶部的容器，其中有一个切换开关，允许用户在亮和暗模式之间切换。

I hope you enjoyed this post and maybe you learned something too! If you decide to implement this on your own website or your next project please share it with me (leave me a comment or shout at me on Twitter). I’m always happy to see the work and projects that others create.

我希望您喜欢这篇文章，也许您也学到了一些东西！如果您决定在自己的网站或下一个项目中实施此操作，请与我分享(在Twitter上给我留言或大喊大叫)。我总是很高兴看到其他人创建的工作和项目。

This post was posted on my blog where I write articles related to front end web development. I also cross post over at Dev.to, so if you’re on that platform you can find my work as well!

这篇文章发布在我的博客上，我在那里写有关前端Web开发的文章。我也在Dev.to上发布了文章，因此，如果您在该平台上，也可以找到我的作品！

While you’re there why not sign up for my Newsletter? I promise I’ll never spam your inbox and your information will not be shared with anyone else.

当您在那里时，为什么不注册我的时事通讯 ？我保证我永远不会向您的收件箱发送垃圾邮件，并且不会与其他任何人共享您的信息。

Have an awesome day filled with love, joy, and coding!

美好的一天充满爱，欢乐和编码！