Toggle Between Light and Dark theme Using JavaScript
Welcome to The CodeWithRandom blog. This blog teaches us how to create a Toggle Between Dark and Light Theme Using JavaScript. We use Html, Css, and JavaScript for the theme switcher.
I hope you enjoy our blog so let’s start with a basic Html Structure for the Toggle Between Dark and Light Theme.
HTML Code For Theme Toggle
<!DOCTYPE html> <html lang="en" class="theme-light"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Theme Switch</title> <link rel="stylesheet" href="./styles.css" type="text/css" /> </head> <body> <div class="container"> <h1>Theme Switcher</h1> <label id="switch" class="switch"> <input type="checkbox" onchange="toggleTheme()" id="slider"> <span class="slider round"></span> </label> <!-- <button id="switch" onclick="toggleTheme()">Switch</button> --> </div> <script> </script> </body> </html>
There is all the HTML Code for the Theme Switcher. Now, you can see output without Css and JavaScript. Then we write css for styling our theme and add functionality using javascript for the Theme Switcher.
Portfolio Website Using HTML ,CSS ,Bootstrap and JavaScript
Only Html Code output
CSS Code For Theme Toggle
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.theme-light {
--color-primary: #0060df;
--color-secondary: #fbfbfe;
--color-accent: #fd6f53;
--font-color: #000000;
}
.theme-dark {
--color-primary: #17ed90;
--color-secondary: #2a2c2d;
--color-accent: #12cdea;
--font-color: #ffffff;
}
.container {
display: flex;
width: 100%;
height: 100%;
background: var(--color-secondary);
flex-direction: column;
justify-content: center;
align-items: center;
}
.container h1 {
color: var(--font-color);
font-family: sans-serif;
}
.container button {
color: var(--font-color);
background: var(--color-primary);
padding: 10px 20px;
border: 0;
border-radius: 5px;
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.slider:before {
position: absolute;
content: "";
height: 40px;
width: 40px;
left: 0px;
bottom: 4px;
top: 0;
bottom: 0;
margin: auto 0;
-webkit-transition: 0.4s;
transition: 0.4s;
box-shadow: 0 0px 15px #2020203d;
background: white url('https://i.ibb.co/FxzBYR9/night.png');
background-repeat: no-repeat;
background-position: center;
}
input:checked + .slider {
background-color: #2196f3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196f3;
}
input:checked + .slider:before {
-webkit-transform: translateX(24px);
-ms-transform: translateX(24px);
transform: translateX(24px);
background: white url('https://i.ibb.co/7JfqXxB/sunny.png');
background-repeat: no-repeat;
background-position: center;
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}50+ Html ,Css & Javascript Projects With Source Code
HTML + CSS Updated output
JavaScript Code For Theme Toggle
// function to set a given theme/color-scheme
function setTheme(themeName) {
localStorage.setItem('theme', themeName);
document.documentElement.className = themeName;
}
// function to toggle between light and dark theme
function toggleTheme() {
if (localStorage.getItem('theme') === 'theme-dark') {
setTheme('theme-light');
} else {
setTheme('theme-dark');
}
}
// Immediately invoked function to set the theme on initial load
(function () {
if (localStorage.getItem('theme') === 'theme-dark') {
setTheme('theme-dark');
document.getElementById('slider').checked = false;
} else {
setTheme('theme-light');
document.getElementById('slider').checked = true;
}
})();Final Output Toggle Between Light and Dark theme Using JavaScript
Live Preview Of Toggle Between Light and Dark theme Using JavaScript
Now that we have completed our theme Switcher. our updated output with Html, Css, and JavaScript. Hope you like the Dark Theme Switcher. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.
Password Strength Checker using HTML ,CSS & JavaScript
Thank you!
This post teaches us how to create a Theme Switcher using simple HTML, CSS, and JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you learn quickly.
Written by – Code With Random/Anki
Code By – Musthaq Ahamad
