feat: add light/dark mode switch button

src/assets/js/color-scheme.js

@@ -0,0 +1,76 @@
+// Setup darkreader for CORS
+DarkReader.setFetchMethod(url => {
+  let headers = new Headers();
+  headers.append('Access-Control-Allow-Origin', '*');
+
+  return window.fetch(url, {
+    headers,
+    mode: 'no-cors',
+  });
+});
+
+function darkModeSelected() {
+  let darkModeSelected = localStorage.getItem('darkMode');
+
+  if (darkModeSelected === 'false') {
+    return false;
+  }
+  if (darkModeSelected === 'true') {
+    return true;
+  }
+  return darkModeSelected;
+}
+
+function darkModeEnabled() {
+  if (darkModeSelected() === true) {
+    return true;
+  }
+  if (darkModeSelected() === null && darkModePreferred === true) {
+    return true;
+  }
+  return false;
+}
+
+// set color mode and icons on page load
+function checkDarkMode() {
+  if (darkModeEnabled()) {
+    DarkReader.enable();
+  } else {
+    DarkReader.disable();
+  }
+  toggleIcon();
+}
+
+function toggleDarkMode() {
+  if (darkModeEnabled()) {
+    disableDarkMode();
+  } else {
+    enableDarkMode();
+  }
+}
+
+function enableDarkMode() {
+  DarkReader.enable();
+  localStorage.setItem('darkMode', 'true');
+  toggleIcon();
+}
+
+function disableDarkMode() {
+  DarkReader.disable();
+  localStorage.setItem('darkMode', 'false');
+  toggleIcon();
+}
+
+function toggleIcon() {
+  if (iconDarkMode.classList.contains('fa-sun')) {
+    // Change to fa-moon
+    iconDarkMode.classList.remove('fa-sun');
+    iconDarkMode.classList.add('fa-moon');
+    iconDarkMode.style.color = 'blue';
+  } else {
+    // Change to fa-sun
+    iconDarkMode.classList.remove('fa-moon');
+    iconDarkMode.classList.add('fa-sun');
+    iconDarkMode.style.color = 'yellow';
+  }
+}

src/jekyll/_includes/footer.html

@@ -36,4 +36,21 @@
       </div>
     </div>
   </div>
+
+  <script>
+
+    const iconDarkMode = document.getElementById('icon-dark-mode');
+    const darkModeButton = document.getElementsByClassName('dark-mode-button')[0]
+    const darkModePreferred = (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)
+
+    window.onload = function() {
+      checkDarkMode()
+    }
+
+    darkModeButton.onclick = function() {
+      toggleDarkMode()
+    }
+
+  </script>
+
 </footer>

src/jekyll/_includes/head.html

@@ -21,6 +21,13 @@
   <!-- Styles -->
   <link href=" {{ site.baseurl }}/assets/style.css?v={{ 'now' | date:'%s' }}" rel="stylesheet"/>
 
+  <!-- FontAwesome -->
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.6.0/css/all.css">
+
+  <!-- Light/Dark Mode-->
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/darkreader.min.js"></script>
+  <script src="/assets/js/color-scheme.js"></script>
+
   <!-- prettier-ignore -->
   <title>
     {% if page.title %}

src/jekyll/_includes/header.html

@@ -9,6 +9,13 @@
 
       <nav class="header-nav">
         <ul class="main-nav">
+          <li class="nav-item dark-mode-icon">
+            <span>
+              <a class="dark-mode-button"  style="text-decoration: none; cursor: pointer;">
+                <i id="icon-dark-mode" class="fa fa-sun"></i>
+              </a>
+            </span>
+          </li>
           <li class="nav-item">
             <a href="{{ site.baseurl }}/">
               <span>{{ site.t[page.lang].nav.home }}</span>

src/sass/_header.scss

@@ -34,7 +34,7 @@
       margin: 0;
       padding: 0;
       list-style: none;
-      font-size: 14px;
+      font-size: 16px;
       .nav-item {
         display: inline-block;
         padding: 0 8px;
@@ -44,6 +44,9 @@
           display: block;
         }
       }
+      .dark-mode-icon {
+        font-size: 20px;
+      }
     }
 
     .submenu {