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.
Top comments (7)
I have a question please, do I have to have an entire css script for the dark mode version of the website?
What do you mean by βCSS scriptβ?
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
You donβt need a separate CSS file. I just use CSS variables. The JavaScript code of the button toggles between them.
Thanks, I just wanted to be certain, I'd implement it as soon as I can. I feel
I'd love to see an example of how to combine this with defaulting to the user's color scheme preference.
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.