🐛 Stop site appearance taking priority over user

Fixes #102
jpanther · Feb 5, 2022 · 09d2e41 · 09d2e41
1 parent 91b5b52
commit 09d2e41
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 15 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,11 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - Updated French translation ([#100](https://github.com/jpanther/congo/pull/100))
 
+### Fixed
+
+- User's appearance preference is lost on page load when default appearance is dark ([#102](https://github.com/jpanther/congo/issues/102))
+- JavaScript warning when appearance switcher is disabled
+
 ## [2.0.1] - 2022-02-03
 
 ### Fixed
@@ -42,7 +47,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - ⚠️ All theme images are now Hugo assets
 - ⚠️ Overhauled `figure` shortcode which now resizes images
 - Upgrade to Tailwind v3.0.18
-- Inline Javascript moved to external files
+- Inline JavaScript moved to external files
 - Improved JSON-LD structured data
 - Breadcrumbs now fallback to section name when `title` is not provided
 - Minor style and layout improvements

diff --git a/assets/js/appearance.js b/assets/js/appearance.js
@@ -1,11 +1,14 @@
 const browserIsDark =
   window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+const sitePreference = document.documentElement.getAttribute("data-default-appearance");
 const userPreference = localStorage.getItem("appearance");
 const switcher = document.getElementById("appearance-switcher");
 
 if (
   (browserIsDark && userPreference === null) ||
   (browserIsDark && userPreference === "dark") ||
+  (sitePreference === "dark" && userPreference === null) ||
+  (sitePreference === "dark" && userPreference === "dark") ||
   userPreference === "dark"
 ) {
   document.documentElement.classList.add("dark");
@@ -22,15 +25,17 @@ if (document.documentElement.getAttribute("data-auto-appearance") === "true") {
 }
 
 window.addEventListener("DOMContentLoaded", (event) => {
-  switcher.addEventListener("click", () => {
-    document.documentElement.classList.toggle("dark");
-    localStorage.setItem(
-      "appearance",
-      document.documentElement.classList.contains("dark") ? "dark" : "light"
-    );
-  });
-  switcher.addEventListener("contextmenu", (event) => {
-    event.preventDefault();
-    localStorage.removeItem("appearance");
-  });
+  if (switcher) {
+    switcher.addEventListener("click", () => {
+      document.documentElement.classList.toggle("dark");
+      localStorage.setItem(
+        "appearance",
+        document.documentElement.classList.contains("dark") ? "dark" : "light"
+      );
+    });
+    switcher.addEventListener("contextmenu", (event) => {
+      event.preventDefault();
+      localStorage.removeItem("appearance");
+    });
+  }
 });
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -8,9 +8,8 @@
   {{- else -}}
     ltr
   {{- end }}"
-  class="scroll-smooth {{ if eq (.Site.Params.defaultAppearance | default "light") "dark" -}}
-    dark
-  {{- end }}"
+  class="scroll-smooth"
+  data-default-appearance="{{ .Site.Params.defaultAppearance | default "light" }}"
   data-auto-appearance="{{ .Site.Params.autoSwitchAppearance | default "true" }}"
 >
   {{- partial "head.html" . -}}