Used icons for selection.

layouts/partials/header.html

@@ -15,6 +15,11 @@
 <!--=================== icons ==============================-->
 <link rel="stylesheet" href="{{ "/fontawesome/css/all.min.css" | relURL }}"/>
 
+<!--=================== dark mode ==========================-->
+{{ if site.Params.darkMode.enable }}
+<link rel="stylesheet" href="{{ "/css/colortheme/colortheme.css" | relURL }}"/>
+{{ end }}
+
 <!--================= fab-icon =========================-->
 {{/* add favicon only if the site author has provided the the favicon */}}
 {{ if site.Params.logo.favicon }}

layouts/partials/navigators/theme-selector.html

@@ -1,20 +1,20 @@
 <li class="nav-item dropdown">
-<!-- This is a 'hack' for initializing the color scheme selection. See /js/darkmode.js -->
+<!-- This is for initializing the color scheme selection for new visitors. See /js/darkmode.js -->
-<div id="themeInitialization" style="display: none;"
+<div id="theme-initialization" style="display: none;"
-    default-theme="{{ site.Params.darkMode.default }}"></div>
+  default-theme="{{ site.Params.darkMode.default }}"></div>
 <a class="nav-link dropdown-toggle"  href="#" id="themeSelector" role="button"
-    data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-    <img src="{{ "/icons/moon-svgrepo-com.svg" }}" width=20>
+  <img id="navbar-theme-icon-svg" src="{{ "/icons/moon-svgrepo-com.svg" }}" width=20>
 </a>
-<div class="dropdown-menu" aria-labelledby="themeSelector">
+<div class="dropdown-menu dropdown-menu-icons-only" aria-labelledby="themeSelector">
-    <a class="dropdown-item nav-link" href="#" onclick="enableLightTheme()">
+  <a class="dropdown-item nav-link" href="#" onclick="enableLightTheme()">
-        <img src="{{ "/icons/sun-svgrepo-com.svg" }}" width=20>
+    <img class="menu-icon-center" src="{{ "/icons/sun-svgrepo-com.svg" }}" width=20>
-    </a>
+  </a>
-    <a class="dropdown-item nav-link" href="#" onclick="enableDarkTheme()">
+  <a class="dropdown-item nav-link" href="#" onclick="enableDarkTheme()">
-        <img src="{{ "/icons/moon-svgrepo-com.svg" }}" width=20>
+    <img class="menu-icon-center" src="{{ "/icons/moon-svgrepo-com.svg" }}" width=20>
-    </a>
+  </a>
-    <a class="dropdown-item nav-link" href="#" onclick="useSystemTheme()">
+  <a class="dropdown-item nav-link" href="#" onclick="useSystemTheme()">
-        <img src="{{ "/icons/computer-svgrepo-com.svg" }}" width=20>
+    <img class="menu-icon-center" src="{{ "/icons/computer-svgrepo-com.svg" }}" width=20>
-    </a>
+  </a>
 </div>
 </li>

static/css/colortheme/colortheme.css

@@ -0,0 +1,20 @@
+/* Note: No need to invert when the screen is small because the navbar is
+   collapsed to a hamburger menu. */
+@media only screen and (min-width: 1200px) {
+  .navbar-icon-svg-dark {
+    filter: invert(1);
+  };
+}
+
+@media only screen and (min-width: 1200px) {
+  .dropdown-menu-icons-only {
+    width: 25px;
+    min-width: 3rem;
+  }
+}
+
+.menu-icon-center {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}

static/js/darkmode-darkreader.js

@@ -8,27 +8,34 @@ const DARK_OPTIONS = {
   sepia: 0
 };
 const SVG_INVERT = {invert: ['img[src$=".svg"]']};
+const NAVBAR_ICON_ID = "navbar-theme-icon-svg";
+const DARK_ICON = "/icons/moon-svgrepo-com.svg";
+const LIGHT_ICON = "/icons/sun-svgrepo-com.svg";
+const SYSTEM_ICON = "/icons/computer-svgrepo-com.svg";
 
 function enableDarkTheme() {
   localStorage.setItem(COLOR_THEME, DARK);
   DarkReader.enable(DARK_OPTIONS, SVG_INVERT);
+  document.getElementById(NAVBAR_ICON_ID).src = DARK_ICON;
 }
 
 function enableLightTheme() {
   localStorage.setItem(COLOR_THEME, LIGHT);
   DarkReader.disable();
+  document.getElementById(NAVBAR_ICON_ID).src = LIGHT_ICON;
 }
 
 function useSystemTheme() {
   localStorage.setItem(COLOR_THEME, SYSTEM);
   DarkReader.auto(DARK_OPTIONS, SVG_INVERT);
+  document.getElementById(NAVBAR_ICON_ID).src = SYSTEM_ICON;
 }
 
 function initializeColorTheme() {
   // We're using the themeInitialization attributes as a 'hack' for setting up
   // the default color scheme because we don't want to complicate this further
   // by creating custom javascript output in Hugo.
-  let themeInitialization = document.getElementById("themeInitialization");
+  let themeInitialization = document.getElementById("theme-initialization");
   let defaultColorScheme = themeInitialization.getAttribute('default-theme');
   // If the user has already selected a preferred theme then use that instead
   // of the default theme. Also, the default theme gets loaded to localStorage

static/js/navbar.js

@@ -8,6 +8,9 @@ const updateNavBar = () => {
     $('#navbar-toggler').removeClass('navbar-dark');
     $('#navbar-toggler').addClass('navbar-light');
 
+    // color theme selector a.k.a. dark mode
+    $('#navbar-theme-icon-svg').removeClass('navbar-icon-svg-dark');
+
     // get the main logo from hidden img tag
     let mainLogo = document.getElementById("main-logo")
     if (mainLogo !== null) {
@@ -22,6 +25,9 @@ const updateNavBar = () => {
     $('#navbar-toggler').removeClass('navbar-light');
     $('#navbar-toggler').addClass('navbar-dark');
 
+    // color theme selector a.k.a. dark mode
+    $('#navbar-theme-icon-svg').addClass('navbar-icon-svg-dark');
+
     // get the inverted logo from hidden img tag
     let invertedLogo = document.getElementById("inverted-logo")
     if (invertedLogo !== null) {