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:

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:

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.