From 1a7391a25136621f26c5bce4c656d53939e97bac Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Tue, 18 Aug 2020 20:33:42 -0400
Subject: [PATCH] FIX: do not override logo markup when loading page in dark
 mode

Ensures that when loading the page in dark mode, logo can switch back to light logo if user toggles their OS appearance.
---
 .../app/pre-initializers/discourse-bootstrap.js          | 9 +++++----
 .../javascripts/discourse/app/widgets/home-logo.js       | 2 +-
 test/javascripts/widgets/home-logo-test.js               | 8 ++++----
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/pre-initializers/discourse-bootstrap.js b/app/assets/javascripts/discourse/app/pre-initializers/discourse-bootstrap.js
index 86e935442a1..b4167a08675 100644
--- a/app/assets/javascripts/discourse/app/pre-initializers/discourse-bootstrap.js
+++ b/app/assets/javascripts/discourse/app/pre-initializers/discourse-bootstrap.js
@@ -91,10 +91,11 @@ export default {
     );
 
     Session.currentProp(
-      "darkColorScheme",
-      getComputedStyle(document.documentElement)
-        .getPropertyValue("--scheme-type")
-        .trim() === "dark"
+      "defaultColorSchemeIsDark",
+      !window.matchMedia("(prefers-color-scheme: dark)").matches &&
+        getComputedStyle(document.documentElement)
+          .getPropertyValue("--scheme-type")
+          .trim() === "dark"
     );
 
     Session.currentProp("highlightJsPath", setupData.highlightJsPath);
diff --git a/app/assets/javascripts/discourse/app/widgets/home-logo.js b/app/assets/javascripts/discourse/app/widgets/home-logo.js
index 31a10fd4151..98b40d7bec7 100644
--- a/app/assets/javascripts/discourse/app/widgets/home-logo.js
+++ b/app/assets/javascripts/discourse/app/widgets/home-logo.js
@@ -85,7 +85,7 @@ export default createWidget("home-logo", {
     // try dark logos first when color scheme is dark
     // this is independent of browser dark mode
     // hence the fallback to normal logos
-    if (Session.currentProp("darkColorScheme")) {
+    if (Session.currentProp("defaultColorSchemeIsDark")) {
       return (
         siteSettings[`site_${name}_dark_url`] ||
         siteSettings[`site_${name}_url`] ||
diff --git a/test/javascripts/widgets/home-logo-test.js b/test/javascripts/widgets/home-logo-test.js
index 130ff8b7e5e..32a18f900dc 100644
--- a/test/javascripts/widgets/home-logo-test.js
+++ b/test/javascripts/widgets/home-logo-test.js
@@ -202,10 +202,10 @@ widgetTest("dark color scheme and dark logo set", {
   beforeEach() {
     this.siteSettings.site_logo_url = bigLogo;
     this.siteSettings.site_logo_dark_url = darkLogo;
-    Session.currentProp("darkColorScheme", true);
+    Session.currentProp("defaultColorSchemeIsDark", true);
   },
   afterEach() {
-    Session.currentProp("darkColorScheme", null);
+    Session.currentProp("defaultColorSchemeIsDark", null);
   },
   test(assert) {
     assert.ok(find("img#site-logo.logo-big").length === 1);
@@ -222,10 +222,10 @@ widgetTest("dark color scheme and dark logo not set", {
   beforeEach() {
     this.siteSettings.site_logo_url = bigLogo;
     this.siteSettings.site_logo_dark_url = "";
-    Session.currentProp("darkColorScheme", true);
+    Session.currentProp("defaultColorSchemeIsDark", true);
   },
   afterEach() {
-    Session.currentProp("darkColorScheme", null);
+    Session.currentProp("defaultColorSchemeIsDark", null);
   },
   test(assert) {
     assert.ok(find("img#site-logo.logo-big").length === 1);