From c7cdebd93161070878464c84d4044db89e53f8cb Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Fri, 9 Jul 2021 14:07:00 -0400
Subject: [PATCH] FIX: Switch logos live when changing color schemes in user
 prefs (#13684)

---
 .../discourse/app/components/site-header.js   |  4 +++-
 .../app/controllers/preferences/interface.js  |  3 +++
 .../discourse/app/lib/color-scheme-picker.js  | 20 ++++++++++++++++---
 3 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/site-header.js b/app/assets/javascripts/discourse/app/components/site-header.js
index 2830bca3d77..d9895801fa8 100644
--- a/app/assets/javascripts/discourse/app/components/site-header.js
+++ b/app/assets/javascripts/discourse/app/components/site-header.js
@@ -29,7 +29,9 @@ const SiteHeaderComponent = MountWidget.extend(
     @observes(
       "currentUser.unread_notifications",
       "currentUser.unread_high_priority_notifications",
-      "currentUser.reviewable_count"
+      "currentUser.reviewable_count",
+      "session.defaultColorSchemeIsDark",
+      "session.darkModeAvailable"
     )
     notificationsChanged() {
       this.queueRerender();
diff --git a/app/assets/javascripts/discourse/app/controllers/preferences/interface.js b/app/assets/javascripts/discourse/app/controllers/preferences/interface.js
index 73bb3f5022a..e82ac1b302e 100644
--- a/app/assets/javascripts/discourse/app/controllers/preferences/interface.js
+++ b/app/assets/javascripts/discourse/app/controllers/preferences/interface.js
@@ -1,4 +1,5 @@
 import Controller, { inject as controller } from "@ember/controller";
+import Session from "discourse/models/session";
 import {
   iOSWithVisualViewport,
   isiPad,
@@ -392,8 +393,10 @@ export default Controller.extend({
           this.themeId,
           true
         );
+        Session.currentProp("darkModeAvailable", false);
       } else {
         loadColorSchemeStylesheet(colorSchemeId, this.themeId, true);
+        Session.currentProp("darkModeAvailable", true);
       }
     },
 
diff --git a/app/assets/javascripts/discourse/app/lib/color-scheme-picker.js b/app/assets/javascripts/discourse/app/lib/color-scheme-picker.js
index 2370a91ba64..5272fd46cc4 100644
--- a/app/assets/javascripts/discourse/app/lib/color-scheme-picker.js
+++ b/app/assets/javascripts/discourse/app/lib/color-scheme-picker.js
@@ -1,6 +1,8 @@
 import cookie, { removeCookie } from "discourse/lib/cookie";
 import I18n from "I18n";
+import Session from "discourse/models/session";
 import { ajax } from "discourse/lib/ajax";
+import { later } from "@ember/runloop";
 
 export function listColorSchemes(site, options = {}) {
   let schemes = site.get("user_color_schemes");
@@ -49,20 +51,20 @@ export function listColorSchemes(site, options = {}) {
 export function loadColorSchemeStylesheet(
   colorSchemeId,
   theme_id,
-  dark = false
+  darkMode = false
 ) {
   const themeId = theme_id ? `/${theme_id}` : "";
   ajax(`/color-scheme-stylesheet/${colorSchemeId}${themeId}.json`).then(
     (result) => {
       if (result && result.new_href) {
-        const elementId = dark ? "cs-preview-dark" : "cs-preview-light";
+        const elementId = darkMode ? "cs-preview-dark" : "cs-preview-light";
         const existingElement = document.querySelector(`link#${elementId}`);
         if (existingElement) {
           existingElement.href = result.new_href;
         } else {
           let link = document.createElement("link");
           link.href = result.new_href;
-          link.media = dark
+          link.media = darkMode
             ? "(prefers-color-scheme: dark)"
             : "(prefers-color-scheme: light)";
           link.rel = "stylesheet";
@@ -70,6 +72,18 @@ export function loadColorSchemeStylesheet(
 
           document.body.appendChild(link);
         }
+        if (!darkMode) {
+          later(() => {
+            const schemeType = getComputedStyle(document.body).getPropertyValue(
+              "--scheme-type"
+            );
+
+            Session.currentProp(
+              "defaultColorSchemeIsDark",
+              schemeType.trim() === "dark"
+            );
+          }, 500);
+        }
       }
     }
   );