migrated darkMode feature to js bundle

assets/scripts/features/darkmode/darkreader.js

@@ -0,0 +1,22 @@
+import { enable, disable, auto } from 'darkreader';
+import { darkmode } from "@params";
+
+const {
+  defaultColorScheme,
+  theme,
+  fixes,
+} = darkmode.darkreader;
+
+export function setSchemeDark() {
+  enable(theme, fixes);
+}
+
+export function setSchemeLight() {
+  disable();
+}
+
+export function setSchemeSystem() {
+  auto(theme, fixes);
+}
+
+export { defaultColorScheme };

assets/scripts/features/darkmode/index.js

@@ -0,0 +1,58 @@
+const PERSISTENCE_KEY = 'darkmode:color-scheme';
+
+async function getService() {
+  if(process.env.FEATURE_DARKMODE_DARKREADER) {
+    return await import('./darkreader');
+  }
+}
+
+window.addEventListener('DOMContentLoaded', async () => {
+  const $menu = document.getElementById('themeMenu');
+  const $icon = document.getElementById('navbar-theme-icon-svg');
+  if ($menu == null || $icon == null) return;
+
+  const $btns = $menu.getElementsByTagName('a');
+  const iconMap = Array.from($btns).reduce((map, $btn) => {
+    $img = $btn.getElementsByTagName('img')[0];
+    map[$btn.dataset.scheme] = $img.src;
+    return map;
+  }, {});
+
+  const {
+    setSchemeDark,
+    setSchemeLight,
+    setSchemeSystem,
+    defaultColorScheme,
+  } = await getService();
+
+  function loadScheme() {
+    return localStorage.getItem(PERSISTENCE_KEY) || defaultColorScheme;
+  }
+  
+  function saveScheme(scheme) {
+    localStorage.setItem(PERSISTENCE_KEY, scheme);
+  }
+  
+  function setScheme(newScheme) {
+    $icon.src = iconMap[newScheme];  
+
+    if (newScheme === 'dark') {
+      setSchemeDark();
+    } else if (newScheme === 'system') {
+      setSchemeSystem();
+    } else {
+      setSchemeLight();
+    }
+  
+    saveScheme(newScheme);
+  }
+
+  setScheme(loadScheme());
+
+  Array.from($menu.getElementsByTagName('a')).forEach(($btn) => {
+    $btn.addEventListener('click', () => {
+      const { scheme } = $btn.dataset;
+      setScheme(scheme);
+    });
+  });
+});

assets/scripts/features/index.js

@@ -5,3 +5,7 @@ if (process.env.FEATURE_VIDEOPLAYER) {
 if (process.env.FEATURE_TOC) {
   import('./toc');
 }
+
+if (process.env.FEATURE_DARKMODE) {
+  import('./darkmode');
+}

layouts/partials/header.html

@@ -14,7 +14,7 @@
 <link rel="stylesheet" href="{{ "/google-fonts/Mulish/mulish.css" | relURL }}"/>
 
 <!--=================== dark mode ==========================-->
-{{ if site.Params.darkMode.enable }}
+{{ if site.Params.features.darkMode.enable }}
 <link rel="stylesheet" href="{{ "/css/colortheme/colortheme.css" | relURL }}"/>
 {{ end }}
 

layouts/partials/navigators/navbar-2.html

@@ -47,7 +47,7 @@
       {{ if .IsTranslated }}
         {{ partial "navigators/lang-selector-2.html" . }}
       {{ end }}
-      {{ if site.Params.darkMode.enable }}
+      {{ if site.Params.features.darkMode.enable }}
         {{ partial "navigators/theme-selector.html" . }}
       {{ end }}
       </ul>

layouts/partials/navigators/navbar.html

@@ -124,7 +124,7 @@
         {{ if .IsTranslated }}
           {{ partial "navigators/lang-selector.html" . }}
         {{ end }}
-        {{ if site.Params.darkMode.enable }}
+        {{ if site.Params.features.darkMode.enable }}
           {{ partial "navigators/theme-selector.html" . }}
         {{ end }}
       </ul>

layouts/partials/navigators/theme-selector.html

@@ -1,19 +1,16 @@
 <li class="nav-item dropdown">
-<!-- This is for initializing the color scheme selection for new visitors. See /js/darkmode.js -->
-<div id="theme-initialization" style="display: none;"
-  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 id="navbar-theme-icon-svg" src="{{ "/icons/moon-svgrepo-com.svg" }}" width=20 alt="Dark Theme">
 </a>
-<div class="dropdown-menu dropdown-menu-icons-only" aria-labelledby="themeSelector">
+<div id="themeMenu" 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="#" data-scheme="light">
     <img class="menu-icon-center" src="{{ "/icons/sun-svgrepo-com.svg" }}" width=20 alt="Light Theme">
   </a>
-  <a class="dropdown-item nav-link" href="#" onclick="enableDarkTheme()">
+  <a class="dropdown-item nav-link" href="#" data-scheme="dark">
     <img class="menu-icon-center" src="{{ "/icons/moon-svgrepo-com.svg" }}" width=20 alt="Dark Theme">
   </a>
-  <a class="dropdown-item nav-link" href="#" onclick="useSystemTheme()">
+  <a class="dropdown-item nav-link" href="#" data-scheme="system">
     <img class="menu-icon-center" src="{{ "/icons/computer-svgrepo-com.svg" }}" width=20 alt="System Theme">
   </a>
 </div>

layouts/partials/scripts.html

@@ -1,8 +1 @@
 {{ partial "helpers/script-bundle.html" }}
-
-{{ if site.Params.darkMode.enable }}
-{{ if eq site.Params.darkMode.provider "darkreader" }}
-<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,59 +0,0 @@
-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"]']};
-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("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
-  // on the first visit.
-  let colorTheme = localStorage.getItem(COLOR_THEME);
-  if (colorTheme == null || colorTheme.length == 0) {
-    colorTheme = defaultColorScheme;
-  }
-  // Enable the color theme
-  if (colorTheme == DARK) {
-    enableDarkTheme();
-  } else if (colorTheme == SYSTEM) {
-    useSystemTheme();
-  } else {
-    // We use light theme for the two conditions below.
-    // 1. the selected theme is light
-    // 2. no default theme is found - fall back to original behavior
-    enableLightTheme();
-  }
-}
-initializeColorTheme()