Dark Mode in Vanilla JavaScript
Hey there!
The trend of creating multiple themes in your project specially in the web design and full stack community has appealed many developers and it is for a good reason. It not only gives the freedom of looking and working at multiple themes, the end user can also view your project as their liking which decreases bounce rate increasing your page rank helping in Search Engine Optimization.
In spite of all the pros of the multi-themed design, it might seem overwhelmingly tedious to work with as changing color of every component will result in redundant code. However, the truth is very from from this hoax. If you have good grasp of CSS variables, the code for creating multi themed design is very minimal and can be elegant as well!
- Live Demo of the Project
- Working with each aspect here will be long, so the starter files for the project is available in the GitHub repository here
- Also the completed files are available in the completed-project branch in same repository here
Final Project:
Final Image for Toggling Dark Mode on and off
After setting up the project, lets first review the CSS file in brief. All other code in the file is for creating the toggling switch and bringing the content in center. The things to focus on here are the first few lines.
The CSS
Here the only parts to focus on is creating the variables in CSS. This in fact is similar to declaring variables and assigning values in an actual programming languages. CSS variables has a lot of other great stuff to look into, for which I will write another blog next time. For now, let’s bear with the code here.
The first two classes here .dark_theme and .light_theme each have two variables with same names clr-background and clr-text, however the values here are different. The .dark_theme class has the values of a dark color for background and a light color for text, and vice versa for light theme.
Now, in the body element we see that the values in background and color properties have the names of the variables declared here instead of actual values. This will later help when the JavaScript is involved.
Initially, in HTML file, body tag has a class of light theme which makes the values in background and color properties to come from the values in variables from class .light_theme.
JavaScript
Coming to JavaScript, we only have few lines of code to toggle the dark mode in the project.
That’s it! Just six lines of code can make toggling of dark mode on and off in your project. The code here is self explanatory as well! Here the first two lines are just selecting the toggle switch label and body tag. Now, the toggle switch has an event listener which when click triggers an anonymous function which check of body tag has the class of dark_theme, and if it does then the class of body tag is updated with the class light_theme else the class of body tag is set to dark_theme.
This then will help in toggling dark mode on and off in the project.
Large Scale Application
This might seem to be applicable in only small scale projects which is far from the truth. Large scale applications also use same technique, i.e. updating body tag with class light_theme or dark_theme based on the toggling of the switch on or off. This is why learning CSS variables is very important, and is widely used in the industry today.
The blog about CSS variables will be out soon. For bow though, there are a lot of videos on YouTube regarding the topic which can be explored.
I hope you understood how to toggle dark mode on or off using vanilla JavaScript along with HTML and CSS.
Thank You Very much for reading the article! If any part of it confuses you, you can e-mail me or even ask it in the comments!!!!
Signing Out!! Adios!✌✌