From 09d2e410c86a23286101612a05fc8e9b314b030f Mon Sep 17 00:00:00 2001
From: James Panther <4462786+jpanther@users.noreply.github.com>
Date: Sat, 5 Feb 2022 19:19:47 +1100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Stop=20site=20appearance=20takin?=
 =?UTF-8?q?g=20priority=20over=20user?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes #102
---
 CHANGELOG.md                 |  7 ++++++-
 assets/js/appearance.js      | 27 ++++++++++++++++-----------
 layouts/_default/baseof.html |  5 ++---
 3 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 62e831d34..e2be5c064 100644
--- 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
index fc4d60957..686a13eac 100644
--- 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
index 039044016..f73c4da0d 100644
--- 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" . -}}