ADVERTISEMENT

Toggle Between Light and Dark theme Using JavaScript

Telegram Group Join Now

ADVERTISEMENT

Toggle Between Light and Dark theme Using JavaScript

Toggle Between Light and Dark theme Using JavaScript
Toggle Between Light and Dark theme Using JavaScript

 

ADVERTISEMENT

ADVERTISEMENT

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.

ADVERTISEMENT

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.

ADVERTISEMENT

Portfolio Website Using HTML ,CSS ,Bootstrap and JavaScript

Only Html Code output

Toggle Between Light and Dark theme Using JavaScript

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

ADVERTISEMENT

HTML + CSS Updated output


Toggle Between Light and Dark theme Using JavaScript

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

ADVERTISEMENT

Toggle Between Light and Dark theme Using JavaScript
Toggle Between Light and Dark theme Using JavaScript

 

ADVERTISEMENT

Toggle Between Light and Dark theme Using JavaScript
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!

ADVERTISEMENT

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.

ADVERTISEMENT

Written by – Code With Random/Anki
Code By – Musthaq Ahamad

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT