Tutorial

Light Mode / Dark Mode Example

<script src="<https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.0/js.cookie.min.js>"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) { 
  var pageBody;
  pageBody = document.querySelectorAll(".body, .nav__switch-circle, .logo");
  var switchClick = false;
  
  function addTransitions() {
    if (switchClick == true) {
     	for (var i = 0; i < pageBody.length; ++i) {
   			pageBody[i].style.WebkitTransition = 'all 0.4s';
        pageBody[i].style.MozTransition = 'all 0.4s';
			}
    }
	}
  
  function state1() {
  	for (var i = 0; i < pageBody.length; ++i) {
   		pageBody[i].classList.remove('mode-two');
		}
		addTransitions();
	}
  
  function state2() {
  	for (var i = 0; i < pageBody.length; ++i) {
   		pageBody[i].classList.add('mode-two');
		}
		addTransitions();
	}
  
  if(Cookies.get('secondModeOn') == "1"){
  	state2();
  }

  $('.switch').click(()=>{
  	switchClick = true;
  	if (Cookies.get('secondModeOn') == "1") {
      state1();
      Cookies.set('secondModeOn', 0);
    }
    else{
      state2();
   		Cookies.set('secondModeOn', 1);
    }
  });
});
</script>

Side Nav Example

<script src="<https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.0/js.cookie.min.js>"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) { 
  var pageBody;
  pageBody = document.querySelectorAll(".navbar, .is--1, .is--2");
  var switchClick = false;
  
  function addTransitions() {
    if (switchClick == true) {
     	for (var i = 0; i < pageBody.length; ++i) {
   			pageBody[i].style.WebkitTransition = 'all 0.4s';
        pageBody[i].style.MozTransition = 'all 0.4s';
			}
    }
	}
  
  function state1() {
  	for (var i = 0; i < pageBody.length; ++i) {
   		pageBody[i].classList.remove('mode-two');
		}
		addTransitions();
	}
  
  function state2() {
  	for (var i = 0; i < pageBody.length; ++i) {
   		pageBody[i].classList.add('mode-two');
		}
		addTransitions();
	}
  
  if(Cookies.get('secondModeOn') == "1"){
  	state2();
  }

  $('.is--hamburger').click(()=>{
  	switchClick = true;
  	if (Cookies.get('secondModeOn') == "1") {
      state1();
      Cookies.set('secondModeOn', 0);
    }
    else{
      state2();
   		Cookies.set('secondModeOn', 1);
    }
  });
});
</script>