updates to avoid duplication in CSS

Lednerb · Nov 3, 2023 · 86ce9dc · 86ce9dc
1 parent ededde1
commit 86ce9dc
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 462 deletions.
diff --git a/v4/README.md b/v4/README.md
@@ -308,7 +308,7 @@ Please note that the top navigation bar is minimized by default on mobile device
 Switching between light and dark theme mode can be enabled by setting the `enableLightDarkMode` parameter to `true`:
 ```toml
 [params]
-    darkmode = false
+  enableLightDarkThemeMode = true
 ```
 
 ### Algolia Search

diff --git a/v4/assets/js/theme.js b/v4/assets/js/theme.js
@@ -95,36 +95,39 @@ $(document).ready(function () {
         $('html, body').animate({scrollTop:0}, '300');
     });
 
-  // Light dark theme mode switcher
-  const lightDarkToggle = document.getElementById("light-dark-toggle");
-  const darkThemeCss = document.getElementById("dark-theme-css");
-  const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
-
-  lightDarkToggle.addEventListener("click", () => {
-    if (lightDarkToggle.className === "fa fa-sun") {
-      setThemeMode("dark");
-    } else {
-      setThemeMode("light");
-    }
-  });
-
-  function setThemeMode(mode) {
-    if (mode === "dark") {
-      darkThemeCss.disabled = false;
-      lightDarkToggle.className = "fa fa-moon";
-    } else {
-      darkThemeCss.disabled = true;
-      lightDarkToggle.className = "fa fa-sun";
-    }
-  }
+    // Light dark theme mode switcher
+    const lightDarkToggle = document.getElementById("light-dark-toggle");
+    const lightThemeCss = document.getElementById("light-theme-css");
+    const darkThemeCss = document.getElementById("dark-theme-css");
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
+
+    lightDarkToggle.addEventListener("click", () => {
+        if (lightDarkToggle.className === "fa fa-sun") {
+            setThemeMode("light");
+        } else {
+            setThemeMode("dark");
+        }
+    });
 
-  const listener = (event) => {
-    if (event.matches) {
-      setThemeMode("dark");
-    } else {
-      setThemeMode("light");
+    function setThemeMode(mode) {
+        if (mode === "dark") {
+            lightThemeCss.disabled = true;
+            darkThemeCss.disabled = false;
+            lightDarkToggle.className = "fa fa-sun";
+        } else {
+            lightThemeCss.disabled = false;
+            darkThemeCss.disabled = true;
+            lightDarkToggle.className = "fa fa-moon";
+        }
     }
-  };
 
-  listener(prefersDark);
+    const themeModeListener = (event) => {
+        if (event.matches) {
+            setThemeMode("dark");
+        } else {
+            setThemeMode("light");
+        }
+    };
+
+    themeModeListener(prefersDark);
 });