Toggle switch css dark mode | Dark / Light Toggle Switch – codewihhrandom

Toggle switch css dark mode |  Dark / Light Toggle Switch – codewihhrandom

Welcome🎉 to Code With Random blog. In this blog, we learn that how we create a   dark mode toggle. We use HTML, and javascript for this dark mode toggle. Hope you enjoy our blog so let’s start with a basic HTML structure for a   dark mode toggle. 

HTML code

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

There is all HTML code for the dark mode toggle. Now, you can see output without CSS, then we write css & javascript for the dark mode toggle.

 * {  
margin: 0;
padding: 0;
border: none;
outline: none;
box-sizing: border-box;
-webkit-tap-highlight-color: transparent;
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 CSS section,  Here is our updated output CSS.


Now add javascript for toggle themes.

Javascript code

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

Final output

Now we have completed our javascript section,  Here is our updated output with javascriptHope you like the dark mode toggle. you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create a  dark mode toggle using simple 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 

This Post Has 0 Comments

  1. Om_bandiwan

    Thank you for notifying we will check the code and if there are any bugs we will fix and update the code.
    Team CodeWithRandom❤

Leave a Reply