DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for How I Implemented the Dark Mode on My Website
Franco Scarpa
Franco Scarpa

Posted on • Originally published at francoscarpa.com

How I Implemented the Dark Mode on My Website

This post was originally published on francoscarpa.com.

francoscarpa.com can be displayed in clear and dark mode. Clear mode is suitable when you are in a bright environment, and dark mode is best when the light around you is low, since it is less tiring on the eyes. You can switch between the two modes using the button at the top. When you change the mode, it is stored as a preference and maintained for each subsequent visit, until you change it. I’ll explain how I implemented this feature.

The Button

I wrote the button’s code from scratch. It is an SVG, which consists of a rectangle with rounded edges and a circle. I was inspired by the iOS Switches. I like them as they are simple to emulate. When the button is disabled, its background is gray and the circle is on the left. When it’s enabled, the rectangle’s background turns green and the circle moves to the right. Visual feedback is also provided through animations, which improves UX due to the sense of transition perceived as the button status changes.

The HTML code that generates the button is this:

Alt Text

An onclick() event is connected to the circle. The button is activated only by pressing the circle, not the surrounding rectangle. This is why it may seem that the button does not work when you press it. Therefore, you must click on the circle.

The JavaScript Code

Operation of the mode change is based on this code:

Alt Text

The toggleTheme() function manages the transition from one mode to another, alternating between the two. A couple of variables store the html element and the button. The final if-statement is necessary to save the currently selected theme upon exiting the current page. It would be annoying to visit a different page and later return to the default clear theme. The option to save settings is possible thanks to the Web Storage API, in particular the localStorage mechanism, which provides persistent storage space for each site. The preferences are maintained even when you leave the site and return to it later. Therefore, through this API, not only is the current theme maintained by navigating through the various pages, but also the last selected theme is shown when you visit the site at a later time.

The toggleTheme() function updates the theme to be displayed by calling the setItem() method, which allows you to store couples of values. Since the light theme is set by default, to check if the dark theme should be provided instead, the final if-statement is responsible for calling the getItem() method to read the value. The function code is executed each time a page is loaded; this way the appropriate theme is shown every time you visit francoscarpa.com.

Top comments (7)

Collapse
 
babalasisi profile image
Omatozaye

I have a question please, do I have to have an entire css script for the dark mode version of the website?

Collapse
 
francoscarpa profile image
Franco Scarpa

What do you mean by β€œCSS script”?

Collapse
 
babalasisi profile image
Omatozaye

CSS file, what I just want to know is will I have a whole different CSS file where the website's dark style is already written and all the button does is switch between both light and dark

Thread Thread
 
francoscarpa profile image
Franco Scarpa

You don’t need a separate CSS file. I just use CSS variables. The JavaScript code of the button toggles between them.

Thread Thread
 
babalasisi profile image
Omatozaye

Thanks, I just wanted to be certain, I'd implement it as soon as I can. I feel

Collapse
 
ajciccarello profile image
Anthony Ciccarello

I'd love to see an example of how to combine this with defaulting to the user's color scheme preference.

Collapse
 
francoscarpa profile image
Franco Scarpa • Edited on

That should not be difficult since prefers-color-scheme is just a media query. I thank you because you gave me a good idea: to modify the implementation, taking into account this preference.

You guessed it

The most popular item in our shop is the stickers. Grab a pack today (with free shipping)!