From fa1fe8511b94501cd430e4fd38b8e02b7161a07b Mon Sep 17 00:00:00 2001
From: James Panther <4462786+jpanther@users.noreply.github.com>
Date: Mon, 14 Mar 2022 10:40:34 +1100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20forcing=20light=20appearan?=
 =?UTF-8?q?ce=20failing=20sometimes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes #149
---
 CHANGELOG.md            |  4 ++++
 assets/js/appearance.js | 17 ++++++++---------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9f0facbf..61409860 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/assets/js/appearance.js b/assets/js/appearance.js
index f69b1f0c..417b1a4a 100644
--- a/assets/js/appearance.js
+++ b/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");