diff --git a/layouts/partials/navigators/theme-selector.html b/layouts/partials/navigators/theme-selector.html
index 7cd9770..51e371c 100644
--- a/layouts/partials/navigators/theme-selector.html
+++ b/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>
\ No newline at end of file
diff --git a/static/images/computer-svgrepo-com.svg b/static/icons/computer-svgrepo-com.svg
similarity index 100%
rename from static/images/computer-svgrepo-com.svg
rename to static/icons/computer-svgrepo-com.svg
diff --git a/static/images/moon-svgrepo-com.svg b/static/icons/moon-svgrepo-com.svg
similarity index 100%
rename from static/images/moon-svgrepo-com.svg
rename to static/icons/moon-svgrepo-com.svg
diff --git a/static/images/sun-svgrepo-com.svg b/static/icons/sun-svgrepo-com.svg
similarity index 100%
rename from static/images/sun-svgrepo-com.svg
rename to static/icons/sun-svgrepo-com.svg
diff --git a/static/js/darkmode-darkreader.js b/static/js/darkmode-darkreader.js
index 036a1a7..409e30d 100644
--- a/static/js/darkmode-darkreader.js
+++ b/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);
-  DarkReader.enable({
-      brightness: 100,
-      contrast: 100,
-      sepia: 0
-  });
+  localStorage.setItem(COLOR_THEME, DARK);
+  DarkReader.enable(DARK_OPTIONS, SVG_INVERT);
 }
 
 function enableLightTheme() {
-  localStorage.setItem('color-theme', LIGHT);
+  localStorage.setItem(COLOR_THEME, LIGHT);
   DarkReader.disable();
 }
 
 function useSystemTheme() {
-  localStorage.setItem('color-theme', SYSTEM);
-  DarkReader.auto({
-    brightness: 100,
-    contrast: 100,
-    sepia: 0
-  });
+  localStorage.setItem(COLOR_THEME, SYSTEM);
+  DarkReader.auto(DARK_OPTIONS, SVG_INVERT);
 }
 
 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;
   }