Deprecate discourse-color-scheme-toggle in favor of the core version (#63)

This theme component has been folded into Discourse core in discourse/discourse#31086. This commit makes the component a no-op if the core version is enabled and shows a warning message to inform admins to remove the component.

Author: OsamaSayegh

README.md

@@ -1,5 +1,3 @@
-# discourse-color-scheme-toggle
+# DEPRECATED
 
-Color Scheme Toggler to switch between Dark / Light schemes set by the user's preferences
-
-This component adds a clickable toggle color scheme button in the hamburger menu.
+This feature has been folded into Discourse core under the `interface color selector` site setting.

javascripts/discourse/connectors/home-logo-contents__after/minimized-hook.gjs

@@ -8,6 +8,11 @@ import {
 } from "../../lib/color-scheme-override";
 
 export default class MinimizedHook extends Component {
+  static shouldRender(args, helper) {
+    const coreSelector = helper.siteSettings.interface_color_selector;
+    return coreSelector === undefined || coreSelector === "disabled";
+  }
+
   @service keyValueStore;
 
   @action

javascripts/discourse/connectors/sidebar-footer-actions/toggler-button.gjs

@@ -3,6 +3,11 @@ import { service } from "@ember/service";
 import ColorSchemeToggler from "../../components/color-scheme-toggler";
 
 export default class TogglerButton extends Component {
+  static shouldRender(args, helper) {
+    const coreSelector = helper.siteSettings.interface_color_selector;
+    return coreSelector === undefined || coreSelector === "disabled";
+  }
+
   @service session;
   @service siteSettings;
 

javascripts/discourse/initializers/color-scheme-toggler.gjs

@@ -3,6 +3,7 @@ import { later, schedule } from "@ember/runloop";
 import { service } from "@ember/service";
 import { loadColorSchemeStylesheet } from "discourse/lib/color-scheme-picker";
 import { bind } from "discourse/lib/decorators";
+import getURL from "discourse/lib/get-url";
 import { withPluginApi } from "discourse/lib/plugin-api";
 import { currentThemeId } from "discourse/lib/theme-selector";
 import ColorSchemeToggler from "../components/color-scheme-toggler";
@@ -19,6 +20,42 @@ class TogglerInit {
   constructor(owner) {
     setOwner(this, owner);
 
+    const coreSelector = this.siteSettings.interface_color_selector;
+    if (coreSelector !== undefined) {
+      const becomeNoOp = coreSelector !== "disabled";
+
+      withPluginApi("1.28.0", (api) => {
+        const currentUser = api.getCurrentUser();
+        if (currentUser?.admin) {
+          const themeId = themePrefix("foo").match(
+            /theme_translations\.(\d+)\.foo/
+          )[1];
+          const themeURL = getURL(`/admin/customize/themes/${themeId}`);
+          const message = becomeNoOp
+            ? `
+            <b>Admin notice:</b> the "Dark-Light Toggle" theme component is still enabled on your site, but it has been superseded by the new core version and doesn't do anything now. Please <a href="${themeURL}">delete</a> it to prevent potential breakages in the future.`
+            : `
+            <b>Admin notice:</b> you're using the "Dark-Light Toggle" theme component which is now available as a core feature. Please enable the core version via the <a href="${getURL(
+              "/admin/site_settings/category/all_results?filter=interface_color_selector"
+            )}">interface color selector</a> site setting and <a href="${themeURL}">delete</a> the theme component.`;
+
+          api.addGlobalNotice(
+            message,
+            "color-scheme-toggle-component-deprecated",
+            {
+              dismissable: true,
+              level: "warn",
+              dismissDuration: moment.duration("1", "day"),
+            }
+          );
+        }
+      });
+
+      if (becomeNoOp) {
+        return;
+      }
+    }
+
     const storedOverride = this.keyValueStore.getItem(
       COLOR_SCHEME_OVERRIDE_KEY
     );