FIX: do not override logo markup when loading page in dark mode

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.

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 86e9354..b4167a0 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 31a10fd..98b40d7 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 130ff8b..32a18f9 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);

GitHub sha: 1a7391a2

This commit has been mentioned on Discourse Meta. There might be relevant details there:

https://meta.discourse.org/t/light-mode-logo-is-picked-up-for-dark-mode-after-upgrade/161502/1