Create a switcher on navigation bar,

<a id="dark-switcher" href="#">
  <i class="fas fa-moon"></i>

Create a js file and include it in the footer,

var switcher = document.getElementById('dark-switcher');
switcher.onclick = function(){
  bd = document.getElementsByTagName("BODY")[0]; // get body tag
  if (bd.classList.contains('dark')) { // current: dark -> want: bright
    switcher.children[0].className = 'fas fa-moon'; // chan
    localStorage.setItem('dark-status', 'bright'); // store the current preference of the user
  } else{ // current: bright -> want: dark
    switcher.children[0].className = 'fas fa-sun';
    localStorage.setItem('dark-status', 'dark'); // store the current preference of the user

Add below code inside <head>. This code will check the current preference of the user (If they already chosen dark mode at the last time they visited website, the site will automatically change to dark mode).

// run on loading the page
const checkDarkModeStatus = () => {
  darkStatus = localStorage.getItem('dark-status');
  if (darkStatus == 'dark'){ // the last time user left is on 'dark mode'
    document.getElementById('dark-switcher').children[0].className = 'fas fa-sun';
  } else {
    document.getElementById('dark-switcher').children[0].className = 'fas fa-moon';;
window.onload = checkDarkModeStatus;

Notice an error?

Everything on this site is published on Github. Just summit a suggested change or email me directly (don't forget to include the URL containing the bug), I will fix it.