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!

美好的一天充滿愛，歡樂和編碼！

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

hexo博客添加暗色模式