fix: rename the classes

Lednerb · Oct 30, 2023 · 77731a4 · 77731a4
1 parent 7151139
commit 77731a4
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 36 deletions.
diff --git a/v4/assets/js/dark-toggle.js b/v4/assets/js/dark-toggle.js
@@ -1,35 +1,31 @@
-const dkToggle = document.getElementById("darkToggleLogo");
-const darkTheme = document.getElementById("darkTheme");
-const PCS = window.matchMedia("(prefers-color-scheme: dark)");
+const lightDarkToggle = document.getElementById("light-dark-toggle");
+const darkThemeCss = document.getElementById("dark-theme-css");
+const prefersDark = window.matchMedia("(prefers-color-scheme: dark)");
 
-dkToggle.addEventListener("click", () => {
-  if (dkToggle.className === "fa fa-sun") {
-    setTheme("dark");
-  }
-  else {
-    setTheme("light");
+lightDarkToggle.addEventListener("click", () => {
+  if (lightDarkToggle.className === "fa fa-sun") {
+    setThemeMode("dark");
+  } else {
+    setThemeMode("light");
   }
 });
 
-function setTheme(mode) {
+function setThemeMode(mode) {
   if (mode === "dark") {
-    darkTheme.disabled = false;
-    dkToggle.className = "fa fa-moon";
+    darkThemeCss.disabled = false;
+    lightDarkToggle.className = "fa fa-moon";
   } else {
-    darkTheme.disabled = true;
-    dkToggle.className = "fa fa-sun";
+    darkThemeCss.disabled = true;
+    lightDarkToggle.className = "fa fa-sun";
   }
 }
 
 const listener = (event) => {
   if (event.matches) {
-    setTheme("dark");
-  }
-  else {
-    setTheme("light");
+    setThemeMode("dark");
+  } else {
+    setThemeMode("light");
   }
 };
 
-// PCS.addEventListerner("change", listener);
-listener(PCS);
-
+listener(prefersDark);
diff --git a/v4/assets/sass/_dk-header.scss b/v4/assets/sass/_dk-header.scss
@@ -16,8 +16,8 @@ header {
        }
     }
 
-    .switchbox {
-        .darkToggleBox {
+    .selectors {
+        .light-dark-mode {
           background-color: $dk-special-color;
             button {
               color: $dk-header-text-color;

diff --git a/v4/assets/sass/_header.scss b/v4/assets/sass/_header.scss
@@ -82,12 +82,12 @@ header {
         }
     }
 
-    .switchbox {
+    .selectors {
       position: absolute;
       right: 0;
       bottom: 0;
       display: flex;
-        .darkToggleBox {
+        .light-dark-mode {
           background-color: $special-color;
           margin-right: 1em;
           display: flex;

diff --git a/v4/assets/sass/dk-theme.scss → v4/assets/sass/dark-theme.scss b/v4/assets/sass/dk-theme.scss → v4/assets/sass/dark-theme.scss
diff --git a/v4/layouts/partials/css.html b/v4/layouts/partials/css.html
@@ -1,17 +1,18 @@
 {{ $options := dict "targetPath" "theme.css" "enableSourceMap" true "precision" 6 }}
 {{ $css := resources.Get "sass/theme.scss" | resources.ExecuteAsTemplate "theme.scss" . | toCSS $options }}
+{{ $darkOptions := dict "targetPath" "dark-theme.css" "enableSourceMap" true "precision" 6 }}
+{{ $darkCss := resources.Get "sass/dark-theme.scss" | resources.ExecuteAsTemplate "dark-theme.scss" . | toCSS $darkOptions }}
 
 {{ if or (.Site.IsServer) (eq hugo.Environment "development") }}
-    <link rel="stylesheet" href="{{ $css.Permalink }}" media="screen">
+  <link rel="stylesheet" href="{{ $css.Permalink }}" media="screen">
+  <link rel="stylesheet" disabled id="dark-theme-css" href="{{ $darkCss.Permalink }}" media="screen">
 {{ else }}
-    {{ $css := $css | resources.Minify | resources.Fingerprint }}
-    <link rel="stylesheet" href="{{ $css.Permalink }}" integrity="{{ $css.Data.Integrity }}" media="screen">
+  {{ $css := $css | resources.Minify | resources.Fingerprint }}
+  <link rel="stylesheet" href="{{ $css.Permalink }}" integrity="{{ $css.Data.Integrity }}" media="screen">
+  {{ $darkCss := $darkCss | resources.Minify | resources.Fingerprint }}
+  <link rel="stylesheet" disabled id="dark-theme-css" href="{{ $darkCss.Permalink }}" integrity="{{ $css.Data.Integrity }}" media="screen">
 {{ end }}
 
-{{ $dkoptions := dict "targetPath" "dk-theme.css" "enableSourceMap" true "precision" 6 }}
-{{ $dkTheme := resources.Get "sass/dk-theme.scss" | resources.ExecuteAsTemplate "dkTheme.scss" . | toCSS $dkoptions }}
-<link disabled id="darkTheme" rel="stylesheet" href="{{ $dkTheme.Permalink }}" media="screen">
-
 {{ if isset .Site.Params "css_modules" }}
     {{ range .Site.Params.css_modules }}
         <link rel="stylesheet" href="{{ . | absURL }}">

diff --git a/v4/layouts/partials/header.html b/v4/layouts/partials/header.html
@@ -36,10 +36,10 @@ <h3 class="title">
                 <span class="subtitle">{{ . }}</span>
             {{ end }}
         </div>
-        <div class="switchbox">
-          {{ if .Site.Params.darkmode | default 1 }}
-          <div class="darkToggleBox">
-            <button id="darkToggleLogo" class="fa-solid fa-hourglass"></button>
+        <div class="selectors">
+          {{ if .Site.Params.enableLightDarkMode | default 1 }}
+          <div class="light-dark-mode">
+            <button id="light-dark-toggle" class="fa-solid fa-hourglass"></button>
           </div>
           {{ end }}
           {{ if and (gt .Site.Languages 1) (.Site.Params.showHeaderLanguageChooser | default true) }}

diff --git a/v4/tests/exampleSite/config.toml b/v4/tests/exampleSite/config.toml
@@ -25,6 +25,7 @@ disqusShortname = "bilberry-hugo-theme"
   # theme.css and theme.js, respectively.
   css_modules = []
   js_modules = []
+  enableLightDarkThemeMode = true
 
   # Description and meta data for the search engines
   author = "Lednerb"