Dark_light_fiddle

Toggle Darkmode styles

by andy

HTML

<nav id='nav-bar'>
  <label class='switch'>
    <input type='checkbox' name='dark-cb' class='dark-cb'>
    <span class='slider round'></span>
  </label>
</nav>

CSS

/* variables */
:root{
	--w:2rem;
	--h:2rem;
	--l:0rem;
	--t:0rem;
	--r:10rem;
	
	--sw:5rem;
	--sh:2rem;
	
	--pt:1rem;
	--pl:2rem;
}


html {
	min-height: 100%;
}
.switch {
	position:absolute;
	
	top:var(--pt);
	left:var(--pl);
	width:var(--sw);
	height:var(--sh);
}


/* Hide default HTML checkbox */
.switch input {
	opacity:1;
	width:2rem;
	height:10rem;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
	position:absolute;
	cursor:pointer;
	
	top:0;
	left:0;
	right:0;
	bottom:0;
	
	background-color:skyblue;
	transition:0.4s;
}

.slider::before {
	position:absolute;
	content:'';
	
	height:var(--h);
	width:var(--w);
	left:var(--l);
	bottom:var(--t);
	
	background-color:#FFFF66;
	transition:0.4s;
}

input:checked + .slider {
	background-color:darkblue;
}

input:focus + .slider {
	box-shadow:0 0 1000px darkblue;
}

input:checked + .slider::before {
	transform:translateX( calc( var(--sw) - var(--w) ) );
}


/* Rounded sliders */
.slider.round {
	border-radius:var(--r);
}
.slider.round::before {
	border-radius:var(--r);
}
.dark {
	filter:invert(1);
}








html.dark{
	background:gray;
	color:white;
}

JavaScript

const store='darkmode_toggle';
const cn='dark';

const html=document.querySelector('html');
const bttn=document.querySelector('.slider');
const chk=document.querySelector('input[type="checkbox"][name="dark-cb"]');


function darkMode() {
  // get the stored value. This will be null if it does not exist.
  let i=localStorage.getItem(store);

  // set the initial value if null.
  if( i==null ){
    localStorage.setItem(store,0);
    i=Number(localStorage.getItem(store));
  }else i=Number(i);


  // if `darkMode` was invoked by a `click` event - toggle the saved value
  if( typeof( arguments[0] )!='undefined' && arguments[0].type=='click' ){
    localStorage.setItem( store, 1 - i );
    i=Number(localStorage.getItem(store));
  }


  // set attributes and classes as appropriate to current state
  switch(i){
    case 1:
      html.classList.add(cn)
      bttn.classList.add(cn);

      // force the checkbox state on page load only
      if( typeof( arguments[0] )=='undefined' )chk.checked=1;
      break;
    case 0:
      html.classList.remove(cn)
      bttn.classList.remove(cn);
      if( html.classList.length==0 )html.removeAttribute('class');
      if( bttn.classList.length==0 )bttn.removeAttribute('class');

      // force the checkbox state on page load only
      if( typeof( arguments[0] )=='undefined' )chk.checked=0;
      break;
  }
}


bttn.addEventListener('click', darkMode );
darkMode();