ADVERTISEMENT

Dark/ Light Theme Toggle Switch Using HTML,CSS & JavaScript

Telegram Group Join Now

ADVERTISEMENT

Dark/ Light Theme Toggle Switch Using HTML,CSS & JavaScript

Dark/ Light Theme Toggle Switch Using HTML,CSS & JavaScript
Dark/ Light Theme Toggle Switch Using HTML,CSS & JavaScript

 

ADVERTISEMENT

ADVERTISEMENT

Welcome to the Codewithrandom blog. In this blog, We learn how to create a Light/Dark Toggle Mode Switch. We use HTML, CSS, and JavaScript for this Light Toggle Mode Switch.

I hope you enjoy our blog so let’s start with a basic html structure for a Light Toggle Mode Switch.

ADVERTISEMENT

HTML Code Light/Dark Toggle Mode Switch

<label class="switch">
<input class="switch__input" type="checkbox" data-theme-toggle>
<span class="switch__slider"></span>
</label>

There is all the html code for the Light/Dark Toggle Mode Switch. Now, you can see output without Css and JavaScript. then we write Css for styling Light/Dark Mode and javascript for Switch Light To Dark Mode Toggle.

ADVERTISEMENT

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

Html Code Output

Dark/ Light Theme Toggle Switch Using HTML,CSS & JavaScript
Dark/ Light Theme Toggle Switch Using HTML,CSS & JavaScript

CSS Code Light/Dark Toggle Mode Switch

* {
margin: 0;
padding: 0;
border: none;
outline: none;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
}
html,
body {
height: 100%;
}
:root {
--color-1: #040404;
--color-2: #f9f9f9;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: var(--color-1);
transition: background 0.6s;
}
.switch {
position: relative;
display: inline-block;
width: 3.8rem;
height: 2rem;
}
.switch__input {
opacity: 0;
width: 0;
height: 0;
}
.switch__slider {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #ff4754;
border-radius: 1rem;
transition: background 0.2s;
cursor: pointer;
}
.switch__slider::before {
content: "";
position: absolute;
left: 0.2rem;
top: 50%;
transform: translateY(-50%);
height: 1.6rem;
width: 1.6rem;
border-radius: 1.6rem;
background: var(--color-1);
transition: transform 0.2s, width 0.2s, background 0.2s;
}
.switch__input:checked + .switch__slider {
background: var(--color-2);
}
.switch__input:not(:checked):active + .switch__slider::before {
width: 2.4rem;
}
.switch__input:checked:active + .switch__slider::before {
transform: translate(1rem, -50%);
width: 2.4rem;
}
.switch__input:checked + .switch__slider::before {
transform: translate(1.8rem, -50%);
}

Now we have completed our Light/Dark Toggle Mode Switch Styling. Here is our updated output HTML + CSS.

ADVERTISEMENT

Restaurant Website Using HTML And CSS With Source Code

Output 

Dark/ Light Theme Toggle Switch Using HTML,CSS & JavaScript
Dark/ Light Theme Toggle Switch Using HTML,CSS & JavaScript

 

ADVERTISEMENT

Dark/ Light Theme Toggle Switch Using HTML,CSS & JavaScript
Dark/ Light Theme Toggle Switch Using HTML,CSS & JavaScript

JavaScript Code Light/Dark Toggle Mode Switch

Now add javascript code for dark to a light theme toggle switch.

ADVERTISEMENT

const stylesheet = document.documentElement.style;
const toggle = document.querySelector(".switch__input[data-theme-toggle]");
toggle.addEventListener("click", () => {
// get the css variables
const color1 = getComputedStyle(document.documentElement).getPropertyValue(
"--color-1"
);
const color2 = getComputedStyle(document.documentElement).getPropertyValue(
"--color-2"
);
// switching the css variables
stylesheet.setProperty("--color-1", color2);
stylesheet.setProperty("--color-2", color1);
});

Final Output Light Toggle Mode Switch using JavaScript

 

Dark/ Light Theme Toggle Switch Using HTML,CSS & JavaScript
Dark/ Light Theme Toggle Switch Using HTML,CSS & JavaScript

 

Dark/ Light Theme Toggle Switch Using HTML,CSS & JavaScript
Dark/ Light Theme Toggle Switch Using HTML,CSS & JavaScript
 

Now we have completed our Light/Dark Toggle Mode Switch. Here is our updated output with Html, Css, and JavaScript. Hope you like the dark mode toggle. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.

Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)

ADVERTISEMENT

Thank you!

ADVERTISEMENT

In this post, we learn how to create a Light Toggle Mode Switch Using HTML, CSS, and JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

ADVERTISEMENT

Written by – Code With Random/Anki

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT

Telegram Group Join Now

Share on:

0 thoughts on “Dark/ Light Theme Toggle Switch Using HTML,CSS & JavaScript”

  1. ADVERTISEMENT

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT