Creating a toggle button for dark and light mode is easy with our guide for beginner web developers. Learn how to implement it using HTML, CSS, and jQuery.
Table of Contents
Before tackling this topic, I would like to tell you why a dark mode is necessary on your website. Dark mode became popular in the last 3-5 years as companies started rolling out these modes to benefit night users and those with bright screens. You know, dark mode is everywhere on iOS, Android, Windows. If it's everywhere, that doesn't mean you should have one, so why does it matter. let's say if a user visits your website at night to read an article, lighter colors will strain the user's eyes. so I think the dark mode is an essential feature for every website.
Here are the benefits of using a dark theme:
- Improve text readability
- Better Contrast
- Reduce eye strain
- Less flickering
- Less blue light
- Less likely to cause photophobia
- Can save a small amount of electricity
A dark/light mode switch allows website visitors to choose between a dark and light theme for the website. In this tutorial, we'll guide you through the process of creating a dark/light mode switch for your website using HTML, CSS, and jQuery. Not only is a dark/light mode switch a popular design trend, but it also provides users with a better browsing experience, especially when browsing at night or in low-light environments.
Join My Telegram Channel to Download the Project: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, I'm going to provide you with a simple markup element that you can style however you like.
Our demo also uses jQuery. In this example, we'll add the script to the HTML file directly from the Cloudflare CDN so it's always up to date. Be careful to add the jQuery library before the custom script so it can use its functionality.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
This is the basic structure of our dark/light mode switch using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the website is in place, the next step is to add styling to the website using CSS. CSS allows us to control the visual appearance of the website, including things like layout, color, and typography.
Next, create the CSS for the light mode and dark mode. The CSS below uses a column-based flexbox layout that allows you to easily position elements on the page, especially the .switch class that handles the dark mode toggle wrapper and img elements. Create a CSS file with the name of styles.css and paste the given codes in your CSS file.
body {
font-family: sans-serif;
font-size: 1.125rem;
display: flex;
flex-direction: column;
max-width: 50rem;
margin: 0 auto;
padding: 0 0.9375rem;
}
small {
font-style: italic;
}
article {
display: flex;
flex-direction: column;
}
img {
max-width: 100%;
display: block;
align-self: center;
}
.switch {
align-self: flex-end;
margin: 0.9375rem;
}
.inner-switch {
display: inline-block;
cursor: pointer;
border: 1px solid #555;
border-radius: 1.25rem;
width: 3.125rem;
text-align: center;
font-size: 1rem;
padding: 0.1875rem;
margin-left: 0.3125rem;
}
.dark,
.dark * {
background-color: #222;
color: #e6e6e6;
border-color: #e6e6e6;
} Step 3 (JavaScript Code):
Finally, the script.js file adds toggle functionality to the toggle button. So when the user clicks the toggle button, the dark mode will be applied and the label on the button will change to "ON". And, if the user clicks the toggle when the page is in dark mode, the light mode will be applied and the label will change to "OFF".
Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document, so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
$( ".inner-switch" ).on("click", function() {
if( $( "body" ).hasClass( "dark" )) {
$( "body" ).removeClass( "dark" );
$( ".inner-switch" ).text( "OFF" );
} else {
$( "body" ).addClass( "dark" );
$( ".inner-switch" ).text( "ON" );
}
});Final Output:
Conclusion:
Congratulations, you've now learned how to create a dark/light mode switch using HTML, CSS, and jQuery. Not only does this switch make your website look more modern and stylish, but it also provides a better user experience for visitors. By following the steps outlined in this tutorial, you can easily implement this switch on your own website and make it more user-friendly for everyone.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
