hexo博客添加暗色模式

同一個(gè)網(wǎng)站，兩種不同的配色方案 (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.

去年，我特別指出了從頭開(kāi)始重新設(shè)計(jì)網(wǎng)站的重要性。 我想要一個(gè)簡(jiǎn)單而簡(jiǎn)約的外觀，清楚地說(shuō)明這是什么-一個(gè)投資組合網(wǎng)站。

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.

從頭開(kāi)始重新構(gòu)建網(wǎng)站后，似乎到處都是轉(zhuǎn)彎，還有另一篇關(guān)于向您的網(wǎng)站添加暗模式的文章。

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.

起初我不認(rèn)為這會(huì)帶來(lái)太大的改變，因?yàn)殡m然我偏愛(ài)深色，但我覺(jué)得我的網(wǎng)站在明亮，有趣的色彩和深色字體之間取得了很好的平衡。

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

我讀了我之前提到的一些文章，對(duì)它的思考越深，我決定就越去追求它。

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)那里獲得了一些啟發(fā)，他在這個(gè)主題上寫(xiě)了一篇很棒的文章 。 與Flavio決定使用其網(wǎng)站不同，我沒(méi)有將用戶的選擇添加到本地存儲(chǔ)中。

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.

這部分是由于我們站點(diǎn)之間的差異。 我有一個(gè)靜態(tài)網(wǎng)站，除了博客(位于另一個(gè)平臺(tái)上)之外，沒(méi)有重定向/單獨(dú)的頁(yè)面，因此用戶通常不會(huì)刷新頁(yè)面。 這是一個(gè)很好的選擇，稍后我可以添加。

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.

實(shí)現(xiàn)此目的的代碼非常簡(jiǎn)單。 我采用了與Flavio相同的方法，并通過(guò)CSS添加了樣式更改。 我必須再執(zhí)行幾步，因?yàn)槲业哪繕?biāo)網(wǎng)頁(yè)上有一張圖片。

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.

我必須在某些規(guī)則上使用！important標(biāo)志，因?yàn)樗鼈兾凑_應(yīng)用。 這是最簡(jiǎn)單的實(shí)現(xiàn)方法，我知道不建議使用此標(biāo)志，因此我會(huì)在不久的將來(lái)尋找替代方法。

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

這是我用來(lái)使切換開(kāi)關(guān)正常工作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 ，然后向其添加事件監(jiān)聽(tīng)器 。

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.

接下來(lái)，設(shè)置我的everything變量，該變量將選擇頁(yè)面上的所有內(nèi)容，并選擇projectTiles因?yàn)榇祟悓儆谔囟ǖ囊唤M疊加層，所以我不想使用純色背景。

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.

接下來(lái)，由于我使用的是返回靜態(tài)NodeList的 querySelectorAll ，因此我遍歷了兩個(gè)NodeList中的所有元素，然后將類切換為dark或?qū)⑵鋸淖兞縫rojectTiles返回的元素中完全刪除。

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.

我剩下的是網(wǎng)站頂部的容器，其中有一個(gè)切換開(kāi)關(guān)，允許用戶在亮和暗模式之間切換。

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.

我希望您喜歡這篇文章，也許您也學(xué)到了一些東西！ 如果您決定在自己的網(wǎng)站或下一個(gè)項(xiàng)目中實(shí)施此操作，請(qǐng)與我分享(在Twitter上給我留言或大喊大叫)。 我總是很高興看到其他人創(chuàng)建的工作和項(xiàng)目。

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!

這篇文章發(fā)布在我的博客上，我在那里寫(xiě)有關(guān)前端Web開(kāi)發(fā)的文章。 我也在Dev.to上發(fā)布了文章 ，因此，如果您在該平臺(tái)上，也可以找到我的作品！

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.

當(dāng)您在那里時(shí)，為什么不注冊(cè)我的時(shí)事通訊 ？ 我保證我永遠(yuǎn)不會(huì)向您的收件箱發(fā)送垃圾郵件，并且不會(huì)與其他任何人共享您的信息。

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

美好的一天充滿愛(ài)，歡樂(lè)和編碼！

翻譯自: https://www.freecodecamp.org/news/how-i-added-dark-mode-to-my-website-484bc3cb0318/

hexo博客添加暗色模式

總結(jié)

以上是生活随笔為你收集整理的hexo博客添加暗色模式_我如何向网站添加暗模式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。