From a25bb81a64a73aedcb33eeaea29db63327358dbb Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Thu, 18 May 2023 01:31:20 -0400
Subject: [PATCH] DEV: Improve manual color scheme toggle in styleguide
 (#21629)

---
 .../components/toggle-color-mode.hbs          |  4 ++-
 .../discourse/components/toggle-color-mode.js | 27 ++++++++++++++++++-
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/plugins/styleguide/assets/javascripts/discourse/components/toggle-color-mode.hbs b/plugins/styleguide/assets/javascripts/discourse/components/toggle-color-mode.hbs
index cc147e30817..be380d583e4 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/toggle-color-mode.hbs
+++ b/plugins/styleguide/assets/javascripts/discourse/components/toggle-color-mode.hbs
@@ -1 +1,3 @@
-<DButton @action={{this.toggle}} class="toggle-color-mode">Toggle color</DButton>
\ No newline at end of file
+{{#if this.shouldRender}}
+  <DButton @action={{this.toggle}} class="toggle-color-mode">Toggle color</DButton>
+{{/if}}
\ No newline at end of file
diff --git a/plugins/styleguide/assets/javascripts/discourse/components/toggle-color-mode.js b/plugins/styleguide/assets/javascripts/discourse/components/toggle-color-mode.js
index 3e33769cd36..c0165ed1c51 100644
--- a/plugins/styleguide/assets/javascripts/discourse/components/toggle-color-mode.js
+++ b/plugins/styleguide/assets/javascripts/discourse/components/toggle-color-mode.js
@@ -2,13 +2,17 @@ import Component from "@glimmer/component";
 import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
 import { tracked } from "@glimmer/tracking";
+import { loadColorSchemeStylesheet } from "discourse/lib/color-scheme-picker";
+import { currentThemeId } from "discourse/lib/theme-selector";
 
 const DARK = "dark";
 const LIGHT = "light";
 
 function colorSchemeOverride(type) {
   const lightScheme = document.querySelector("link.light-scheme");
-  const darkScheme = document.querySelector("link.dark-scheme");
+  const darkScheme =
+    document.querySelector("link.dark-scheme") ||
+    document.querySelector("link#cs-preview-dark");
 
   if (!lightScheme && !darkScheme) {
     return;
@@ -42,8 +46,29 @@ function colorSchemeOverride(type) {
 
 export default class ToggleColorMode extends Component {
   @service keyValueStore;
+  @service siteSettings;
 
   @tracked colorSchemeOverride = this.default;
+  @tracked shouldRender = true;
+
+  constructor() {
+    super(...arguments);
+
+    // If site has a dark color scheme set but user doesn't auto switch in dark mode
+    // we need to load the stylesheet manually
+    if (!document.querySelector("link.dark-scheme")) {
+      if (this.siteSettings.default_dark_mode_color_scheme_id > 0) {
+        loadColorSchemeStylesheet(
+          this.siteSettings.default_dark_mode_color_scheme_id,
+          currentThemeId(),
+          true
+        );
+      } else {
+        // no dark color scheme available, hide button
+        this.shouldRender = false;
+      }
+    }
+  }
 
   get default() {
     return window.matchMedia("(prefers-color-scheme: dark)").matches