My Brain Cells

Easiest (and best) learning materials for anyone with a curiosity for machine learning and artificial intelligence, Deep learning, Programming, and other fun life hacks.

Convert Any Website From Light to Dark Mode


First thing first, Add this code in your “html”

<head lang = “en”, data-theme = “light”>





                <div class=”theme-switch-wrapper”>

<label class=”theme-switch for=”checkbox>

<input type=”checkbox” id=”checkbox”/>

<div class=”slider round”></div>


<em>Swtich Theme</em>



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 ( {

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);



Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top