Recent Posts

Convert Any Website From Light to Dark Mode

 



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:



No comments

If you have any doubts, Please let me know