Free Coding Ebook 👉 Get Now
Dark/ Light Theme Toggle Switch Using HTML,CSS & JavaScript
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.
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>
ADVERTISEMENT
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.
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
Html Code Output
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.
Restaurant Website Using HTML And CSS With Source Code
Output
JavaScript Code Light/Dark Toggle Mode Switch
Now add javascript code for dark to a light theme toggle switch.
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
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)
Thank you!
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.
Written by – Code With Random/Anki
It's Not Working
Thank you for notifying we will check the code and if there are any bugs we will fix and update the code.
Regards,
Team CodeWithRandom❤