Changed darkreader CDN to local copy.

layouts/partials/navigators/theme-selector.html

@@ -1,7 +1,7 @@
 <li class="nav-item dropdown">
 <!-- This is a 'hack' for initializing the color scheme selection. See /js/darkmode.js -->
 <div id="themeInitialization" style="display: none;"
-    default-theme=" {{ site.Params.darkTheme.default }} "></div>
+    default-theme="{{ site.Params.darkTheme.default }}"></div>
 <a class="nav-link dropdown-toggle"  href="#" id="themeSelector" role="button"
     data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Theme</a>
 <div class="dropdown-menu" aria-labelledby="themeSelector">

layouts/partials/scripts.html

@@ -8,7 +8,7 @@
 
 {{ if site.Params.darkTheme.enable }}
 {{ if eq site.Params.darkTheme.provider "darkreader" }}
-<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/darkreader@4.9.51/darkreader.js"></script>
+<script type="text/javascript" src="{{ "/js/darkreader.js" | relURL }}"></script>
 <script type="text/javascript" src="{{ "/js/darkmode-darkreader.js" | relURL }}"></script>
 {{ end }}
 {{ end }}

static/js/darkmode-darkreader.js

@@ -1,5 +1,9 @@
+const DARK = "dark";
+const LIGHT = "light";
+const SYSTEM = "system";
+
 function enableDarkTheme() {
-  localStorage.setItem('color-scheme', "dark");
+  localStorage.setItem('color-theme', DARK);
   DarkReader.enable({
       brightness: 100,
       contrast: 100,
@@ -8,12 +12,12 @@ function enableDarkTheme() {
 }
 
 function enableLightTheme() {
-  localStorage.setItem('color-scheme', "light");
+  localStorage.setItem('color-theme', LIGHT);
   DarkReader.disable();
 }
 
 function useSystemTheme() {
-  localStorage.setItem('color-scheme', "system");
+  localStorage.setItem('color-theme', SYSTEM);
   DarkReader.auto({
     brightness: 100,
     contrast: 100,
@@ -22,20 +26,22 @@ function useSystemTheme() {
 }
 
 function initializeColorScheme() {
-  // We're using the themeInitialization attributes as a 'hack' for setting up the
-  // default color scheme becauase we don't want to complicate this further by
-  // creating custom javascript output in Hugo.
-  themeInitialization = document.getElementById("themeInitialization");
-  defaultColorScheme = themeInitialization.getAttribute('default-theme');
+  // 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 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
   // on the first visit.
-  if (!localStorage.getItem('color-scheme'))
-    localStorage.setItem('color-scheme', defaultColorScheme);
-  storedColorScheme = localStorage.getItem('color-scheme');
-  if (storedColorScheme == "dark") {
+  let colorTheme = localStorage.getItem('color-theme');
+  if (colorTheme == null || colorTheme.length == 0) {
+    colorTheme = defaultColorScheme;
+  }
+  // Enable the color theme
+  if (colorTheme == DARK) {
     enableDarkTheme();
-  } else if (storedColorScheme == "system") {
+  } else if (colorTheme == SYSTEM) {
     useSystemTheme();
   } else {
     // We use light theme for the two conditions below.