Table of contents
These days, having dark mode enabled on a website is super useful as it makes users feel a little less reluctant to work on the computer as the energy-saving benefits help to trigger motivation.
But what exactly is Dark Mode?
Dark mode is a special screen setting designed to make the best use of dim light situations, particularly at night. Dark mode displays gray-ish or light text on a dark background instead of dark text and graphics against a white background, as is typical for most apps.
Dark mode’s aim is to reduce the glaring white light that may be distracting in the evenings. It may even be easier on your eyes than a traditional screen setting.
Dark mode sometimes has a different name depending on your phone or app, like “dark theme” or “night mode.”
It has been proven that Americans spend more time in front of screens than they ever have before. Children ages 8-18 are now spending an estimated 7.5 hours of screen time just for entertainment each day. This doesn't even include school or educational time also known as "work time".
The biggest problem with today's websites is that most of them don't have the option to turn on dark mode and this can become very frustrating if you are someone who is either always working at night or just someone who is used to having it available.
Perks of Dark Mode
Dark mode has many perks that make it a great feature to have on your website.
Why it's useful
- Visual impairments are reduced
- Optimal viewing experience for night usage
- Battery life is improved
- Blue emitted light from using the screen is now non-existent
As developers, we are always looking for ways to eliminate the harsh emitting white backgrounds with black text on a website. We use the Light-on-dark color scheme, known as Dark mode, to remedy this. The problem is that if Dark-mode is not prioritized when developers create a website, users are likely the ones who will suffer because of it.
If developers can start to prioritize implementing Dark mode in every website they create, this will improve the user experience across the board. Implementing Dark mode using some JavaScript/jQuery code is actually quite easy. This will allow us to add a toggle button so that our users can turn on/off dark mode anytime they please with the click of a button. Let's get started!
Steps to Implement Dark Mode
We are going to create a webpage and implement a dark mode toggle button in 5 easy steps. At the end of the guide, you will find a link to a working Codepen sample of the application. Feel free to play around with it and/or use it in your next project.
- Create a new project folder called
dark-mode. - Create an
index.htmldocument for our HTML structure. - Create a
style.cssdocument for our CSS styling. - Create a
main.jsdocument for our JavaScript/jQuery implementation. - Add JS functionality to the switch/button to toggle dark mode on or off.
Create The HTML Document
Let's go ahead and create a new folder in our project folder called dark-mode and create an HTML document called index.html.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- jQuery CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<!-- Link to CSS File -->
<link rel="stylesheet" href="style.css">
<title>Dark Mode Implementation</title>
</head>
<body>
<div class="mode">
Dark mode:
<span class="change">OFF</span>
</div>
<div>
<h1>Dark Mode Toggle</h1>
<h3>Light and Dark Mode</h3>
<img src="https://i.ibb.co/856wfRH/hacker.png" alt="hacker" border="0">
<p>
Click on the switch on top-right
to move to dark mode.
</p>
</div>
<!-- Link to JS file -->
<script src="main.js"></script>
</body>
</html>
Create the CSS file
Next we need to create our CSS file which will add some color and flavor to our webpage.
body {
padding:10% 3% 10% 3%;
text-align: center;
}
img {
height: 140px;
width: 140px;
}
h1 {
color: #6578fe;
}
.mode {
float: right;
}
.change {
cursor: pointer;
border: 1px solid #555;
border-radius: 40%;
width: 20px;
text-align: center;
padding: 5px;
margin-left: 8px;
}
.dark {
background-color: #222;
color: #e6e6e6;
}
Create the JavaScript file
Finally, we can create the JavaScript file which will contain the code logic that will execute Dark mode when the button is clicked.
Essentially, we are saying here that when the user clicks on the switch, we will toggle the dark mode on or off. We are using jQuery to do this, so please ensure you include the jQuery CDN in the head section of your HTML file, or the toggle will not work.
$( ".change" ).on("click", function() {
if( $( "body" ).hasClass( "dark" )) {
$( "body" ).removeClass( "dark" );
$( ".change" ).text( "OFF" );
} else {
$( "body" ).addClass( "dark" );
$( ".change" ).text( "ON" );
}
});
Test your application
Now that we have our HTML, CSS, and JavaScript files ready, we can test our application. Go ahead and fire up your web browser and open up your index.html file. Your webpage should look like this:
Go ahead and click the Dark mode toggle button to the right to see the dark mode in action.
Here is a video of the dark mode implementation in action:
Codepen Live Link:
Conclusion
You have just learned how to implement Dark Mode on any website you build. You can use this technique to make your website more user-friendly and more accessible. I highly recommend you implement Dark Mode on every website you build. Your users will thank you for doing so.
**Bonus: Implement Dark Mode on ANY Existing website with six lines of code
Now that you know how to implement dark mode on any website you build, there is another trick I want to teach you that will allow you to instantly change any existing website on the web from a light mode site to a dark mode one!
Pretty cool, right!? Let's head over to yahoo.com and look at the site.
As you can see, this site does not support dark mode initially. Let's change that!
- Open up Developer tools by right-clicking anywhere on the webpage and clicking on
inspect. This will open up Dev tools.
- Click on
consoleto open up the JavaScript console. - Paste this code directly into the console:
var allDivs = document.querySelectorAll('div');
for(var i = 0; i < allDivs.length; i++){
allDivs[i].style['background-color'] = 'black';
allDivs[i].style['color'] = 'green';
allDivs[i].style['font-family'] = 'Monospace';
}
Your code should look like this inside the console:
Go ahead and hit Enter on your keyboard, and you should see the site change to dark instantly:
Congratulations! You can now implement dark mode on ANY website with only six lines of code.
🤝 Thank you so much for taking time out of your day to read this Article! I hope it helped you out and you learned something new today! Please leave a comment if you have anything you'd like to add.
☕️ If you enjoy reading my content Buy me a coffee as it will help me continue to make awesome quality blogs!
👨🏽💻 For more Web Dev code snippets, tips, and tricks check out my Grepper Platform
🎨 You can also check out my Portfolio here
🐦 You can also follow me on Twitter to check out my self-taught journey as well as more bite-sized tips on web development.