First thing first, Add this code in your “html”
<head lang = “en”, data-theme = “light”>
——————–
</head>
<body>
————————–
<div class=”theme-switch-wrapper”>
<label class=”theme-switch for=”checkbox>
<input type=”checkbox” id=”checkbox”/>
<div class=”slider round”></div>
</label>
<em>Swtich Theme</em>
</div>
</body>
Next Create a CSS file and put this code in it
[data-theme=”light”] {
–bg-color: #fff;
–color: #333;
–togglebg: #d4e7d5;
–toggleslider: #fff;
–roundcolor: #fff;
–svgcolor: #111;
}
[data-theme=”dark”] {
–bg-color: #333333;
–color: #e9dcdc;
–togglebg: #333;
–toggleslider: #e9dcdc;
–roundcolor: #333;
–svgcolor: #fff;
}
.slider {
background-color: var(–togglebg);
bottom :0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: 0.4s;
}
.slider:before {
background-color: var(–roundcolor);
bottom :4px;
content: “”;
height: 26px;
left: 4px;
position: absolute;
transition: 0.4s;
width: 26px;
}
body {
font-family: -apple-system, BlinkMacsystemFont, “Segoe UI”, Roboto, Oxygen-Sans, sans-serif;
line-height: 1.4;
background-color: var(–bg-color);
transition: all 0.5s;
}
Now create a JS file and put this code in it:
function switchTheme(e) {
if (e.target.checked) {
document.documentElement.setAttribute(‘data-theme’, ‘dark’);
localStorage.setItem(‘theme’, ‘dark’);
}
else {
document.documentElement.setAttribute(‘data-theme’, ‘light’);
localStorage.setItem(‘theme’, ‘light’);
}
}
toggleSwitch.addEventListener(‘change’, switchTheme, false);
OUTPUT:
