A better approach to implementing dark mode on your website
Dark mode in a few lines of code
The first option works with the use of “dark” magic. Joke aside, it consists of one line of CSS.
What? You’re probably wondering how that could work, and you may be right to be skeptical, but it does indeed. Let’s see it in action before we talk about why I don’t like this option so much:
See the Pen <ahref=’https://codepen.io/livecodestream/pen/GRZgjaY’>here(<ahref=’https://codepen.io/livecodestream’>@livecodestream)on CodePen.
As can be seen in the example it works really well, but with an issue: it alsoinvertsimages. This happens because the filter property additionally applies to images, background, and borders. Now, this can be fixed easily by avoiding the change on images (or better said, by inverting the inversion):
See the Pen <ahref=’https://codepen.io/livecodestream/pen/qBZEqOp’>here(<ahref=’https://codepen.io/livecodestream’>@livecodestream)on CodePen.
Nice! But everything transitions so abruptly. Let’s make it nicer with some transitions and colors here and there:
See the Pen <ahref=’https://codepen.io/livecodestream/pen/JjXobGO’>here(<ahref=’https://codepen.io/livecodestream’>@livecodestream)on CodePen.
Done! Now, it won’t always look great. In some cases, it may look a bit strange, and we may want to have more control over each color.
Dark Mode with CSS variables
This is the technique I use on my website and it works pretty well. CSS allows the definition of custom properties (variables), which are entities that can be defined in CSS with specific values and reused throughout the website. You can find detailed information on theMDN docs.However, we will quickly review here how to create a variable and how to use it.
To name a variable we need to prepend–to the variable name. And to use it, we make use of the functionvar().
Now let’s go back to our scenario and try to implement dark mode this way.
It’s much more cumbersome. Now, we need to assign to each element we use on our site the colors we want for text and background. Otherwise, it won’t work. But gives you full control over what’s happening, and you can create different variables for titles, buttons, callouts, you name it.
Let’s see this on a live example:
See the Pen <ahref=’https://codepen.io/livecodestream/pen/jOqEVVb’>here(<ahref=’https://codepen.io/livecodestream’>@livecodestream)on CodePen.
So far I have explained the CSS side of things, but we’ll also work on the JavaScript code to make the switch and even save it on local storage, so the next time the user enters the site we can remember his preference.
Theme toggle logic
Let’s now work on the JS that makes the switch possible. It is actually, again, very simple:
So, what did we do so far? The way the theme works is by applying a data attribute over the HTML element. For that, we need to capture the element in the variablehtmlEl, and then we can finally have a function that receives a theme name and changes the attribute.
But we also want to make sure our changes are stored on the browser so that we remember the user preference for the next time he/she visits our site. For that, we will use thelocalStorageAPI.
Done! Let’s see it live:
See the Pen <ahref=’https://codepen.io/livecodestream/pen/eYZmBWW’>here(<ahref=’https://codepen.io/livecodestream’>@livecodestream)on CodePen.
Thisarticlewas originally published onLive Code StreambyJuan Cruz Martinez(twitter:@bajcmartinez), founder and publisher of Live Code Stream, entrepreneur, developer, author, speaker, and doer of things.
Live Code Streamis also available as a free weekly newsletter. Sign up for updates on everything related to programming, AI, and computer science in general.
