Added SVG inversion.

layouts/partials/navigators/theme-selector.html

@@ -4,17 +4,17 @@
     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">
-    <img src="{{ "/images/moon-svgrepo-com.svg" }}" width=20>
+    <img src="{{ "/icons/moon-svgrepo-com.svg" }}" width=20>
 </a>
 <div class="dropdown-menu" aria-labelledby="themeSelector">
     <a class="dropdown-item nav-link" href="#" onclick="enableLightTheme()">
-        <img src="{{ "/images/sun-svgrepo-com.svg" }}" width=20>
+        <img src="{{ "/icons/sun-svgrepo-com.svg" }}" width=20>
     </a>
     <a class="dropdown-item nav-link" href="#" onclick="enableDarkTheme()">
-        <img src="{{ "/images/moon-svgrepo-com.svg" }}" width=20>
+        <img src="{{ "/icons/moon-svgrepo-com.svg" }}" width=20>
     </a>
     <a class="dropdown-item nav-link" href="#" onclick="useSystemTheme()">
-        <img src="{{ "/images/computer-svgrepo-com.svg" }}" width=20>
+        <img src="{{ "/icons/computer-svgrepo-com.svg" }}" width=20>
     </a>
 </div>
 </li>

static/js/darkmode-darkreader.js

@@ -1,28 +1,27 @@
 const DARK = "dark";
 const LIGHT = "light";
 const SYSTEM = "system";
+const COLOR_THEME = "color-theme";
+const DARK_OPTIONS = {
+  brightness: 100,
+  contrast: 100,
+  sepia: 0
+};
+const SVG_INVERT = {invert: ['img[src$=".svg"]']};
 
 function enableDarkTheme() {
-  localStorage.setItem('color-theme', DARK);
+  localStorage.setItem(COLOR_THEME, DARK);
-  DarkReader.enable({
+  DarkReader.enable(DARK_OPTIONS, SVG_INVERT);
-      brightness: 100,
-      contrast: 100,
-      sepia: 0
-  });
 }
 
 function enableLightTheme() {
-  localStorage.setItem('color-theme', LIGHT);
+  localStorage.setItem(COLOR_THEME, LIGHT);
   DarkReader.disable();
 }
 
 function useSystemTheme() {
-  localStorage.setItem('color-theme', SYSTEM);
+  localStorage.setItem(COLOR_THEME, SYSTEM);
-  DarkReader.auto({
+  DarkReader.auto(DARK_OPTIONS, SVG_INVERT);
-    brightness: 100,
-    contrast: 100,
-    sepia: 0
-  });
 }
 
 function initializeColorTheme() {
@@ -34,7 +33,7 @@ function initializeColorTheme() {
   // 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
   // on the first visit.
-  let colorTheme = localStorage.getItem('color-theme');
+  let colorTheme = localStorage.getItem(COLOR_THEME);
   if (colorTheme == null || colorTheme.length == 0) {
     colorTheme = defaultColorScheme;
   }