🐛 Fix forcing light appearance failing sometimes

Fixes #149

CHANGELOG.md

@@ -23,6 +23,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Taxonomy term listings now honour the `groupByYear` parameter ([#145](https://github.com/jpanther/congo/pull/145))
 - The `alert` shortcode now allows its icon to be specified as a parameter
 
+### Fixed
+
+- Dark appearance shown even when default appearance set to light and auto switching is disabled ([#149](https://github.com/jpanther/congo/issues/149))
+
 ## [2.0.5] - 2022-02-20
 
 ### Added

assets/js/appearance.js

@@ -1,19 +1,18 @@
-const browserIsDark =
-  window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
 const sitePreference = document.documentElement.getAttribute("data-default-appearance");
 const userPreference = localStorage.getItem("appearance");
 
-if (
-  (browserIsDark && userPreference === null) ||
-  (browserIsDark && userPreference === "dark") ||
-  (sitePreference === "dark" && userPreference === null) ||
-  (sitePreference === "dark" && userPreference === "dark") ||
-  userPreference === "dark"
-) {
+if ((sitePreference === "dark" && userPreference === null) || userPreference === "dark") {
   document.documentElement.classList.add("dark");
 }
 
 if (document.documentElement.getAttribute("data-auto-appearance") === "true") {
+  if (
+    window.matchMedia &&
+    window.matchMedia("(prefers-color-scheme: dark)").matches &&
+    userPreference !== "light"
+  ) {
+    document.documentElement.classList.add("dark");
+  }
   window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", (event) => {
     if (event.matches) {
       document.documentElement.classList.add("dark");