Adding Dark Mode to My Website
Tags: darkmode, css, javascript
Published: 2019-03-16 23:24:18

---
title: Adding Dark Mode to My Website
published: true
description: a simple guide to adding dark mode to your website via CSS & JS
tags: darkmode, css, javascript, darkmode
canonical_url: https://jonathansexton.me/blog/adding-dark-mode-toggle-to-my-website/
---

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.<br></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":692} -->
<figure class="wp-block-image"><img src="https://jonathansexton.me/blog/wp-content/uploads/2019/03/website-light-1024x588.png" alt="the home screen of jonathan sexton . me" class="wp-image-692"/><figcaption>My website before adding the light / dark mode toggle option</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>I read some of the articles I mentioned earlier and the more I thought about it the more I decided to go for it. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>I took some inspiration from Flavio Copes who wrote a <a href="https://flaviocopes.com/dark-mode/">terrific article</a> on this very subject.  Unlike what Flavio decided to do with his site, I didn't add the user's choice to local storage.  </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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 cool option and one that I may add in later on.  </p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":695} -->
<figure class="wp-block-image"><img src="https://jonathansexton.me/blog/wp-content/uploads/2019/03/website-dark1-1024x588.png" alt="jonathan sexton . me with dark mode endabled" class="wp-image-695"/><figcaption>Dark mode enabled on my website</figcaption></figure>
<!-- /wp:image -->

<!-- wp:image {"id":697} -->
<figure class="wp-block-image"><img src="https://jonathansexton.me/blog/wp-content/uploads/2019/03/website-dark2-1024x648.png" alt="jonathan sexton . me with dark mode enabled" class="wp-image-697"/><figcaption>Dark mode enabled - 2</figcaption></figure>
<!-- /wp:image -->

<!-- wp:heading -->
<h2>The Code</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":699} -->
<figure class="wp-block-image"><img src="https://jonathansexton.me/blog/wp-content/uploads/2019/03/website-dark-code-1024x300.png" alt="css code showing a class called dark" class="wp-image-699"/><figcaption>The class I applied to the website to make it dark mode</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>I had to use the <strong>!important</strong> 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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Here is the JavaScript I used to get my toggle switch working correctly:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":701} -->
<figure class="wp-block-image"><img src="https://jonathansexton.me/blog/wp-content/uploads/2019/03/website-dark-code2-1024x373.png" alt="lines of javascript code " class="wp-image-701"/><figcaption>The JavaScript for adding functionality to my toggle swtich</figcaption></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>I start by selecting my <code>div</code> with an id of <code>light-dark-mode-container</code> and adding an <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">event listener</a> to it.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Next, I set my variables of <code>everything</code>, which selects all content on the page, and <code>projectTiles</code> because this class belongs to a particular set of overlays I do not want to have a background of a solid color.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Next, since I'm using <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll">querySelectorAll</a></code> which returns a static <a href="https://developer.mozilla.org/en-US/docs/Web/API/NodeList">NodeList</a>, I loop over all of the elements within both NodeLists and either toggle the class <code>dark</code> or completely remove it from the elements returned by the variable <code>projectTiles</code>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:separator -->
<hr class="wp-block-separator"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>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 <a href="https://twitter.com/jj_goose" target="_blank">Twitter</a>).  I'm always happy to see the work that others create.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This post was originally posted on my <a href="https://jonathansexton.me/blog" target="_blank">blog</a> where I write articles related to front end web development.  I also cross post my articles on <a href="https://medium.com/@joncsexton" target="_blank">Medium</a>, so you can find my work on that platform as well!<br></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>While you're there why not sign up for my <strong>Newsletter</strong>?  I promise I'll never spam your inbox and your information will not be shared with anyone else.  <br></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Have an awesome day filled with love, joy, and coding!</p>
<!-- /wp:paragraph -->