Fix theme toggle (#200)

* Use builtin event on color change

* Fix theme toggle

* Update test expectations [skip ci]

---------

Co-authored-by: github-actions <github-actions@github.com>

src/App.vue

@@ -22,17 +22,15 @@ import {
   NodeSearchService,
   SYSTEM_NODE_DEFS,
 } from "./services/nodeSearchService";
-import { ColorPaletteLoadedEvent } from "./types/colorPalette";
-import { LiteGraphNodeSearchSettingEvent } from "./scripts/ui";
 import { app } from "./scripts/app";
 
 const isLoading = ref(true);
 const nodeSearchEnabled = ref(false);
 const nodeSearchService = ref<NodeSearchService>();
 
-const updateTheme = (e: ColorPaletteLoadedEvent) => {
+const updateTheme = (e) => {
   const DARK_THEME_CLASS = "dark-theme";
-  const isDarkTheme = e.detail.id !== "light";
+  const isDarkTheme = e.detail.value !== "light";
 
   if (isDarkTheme) {
     document.body.classList.add(DARK_THEME_CLASS);
@@ -41,8 +39,8 @@ const updateTheme = (e: ColorPaletteLoadedEvent) => {
   }
 };
 
-const updateNodeSearchSetting = (e: LiteGraphNodeSearchSettingEvent) => {
-  nodeSearchEnabled.value = !e.detail;
+const updateNodeSearchSetting = (e) => {
+  nodeSearchEnabled.value = e.detail.value === "default";
 };
 
 const init = async () => {
@@ -52,12 +50,11 @@ const init = async () => {
     ...SYSTEM_NODE_DEFS,
   ]);
 
-  document.addEventListener("comfy:setting:color-palette-loaded", updateTheme);
-  document.addEventListener(
-    "comfy:setting:litegraph-node-search",
+  app.ui.settings.addEventListener("Comfy.ColorPalette.change", updateTheme);
+  app.ui.settings.addEventListener(
+    "Comfy.NodeSearchBoxImpl.change",
     updateNodeSearchSetting
   );
-
   app.ui.settings.refreshSetting("Comfy.NodeSearchBoxImpl");
   app.ui.settings.refreshSetting("Comfy.ColorPalette");
 };
@@ -73,12 +70,9 @@ onMounted(async () => {
 });
 
 onUnmounted(() => {
-  document.removeEventListener(
-    "comfy:setting:color-palette-loaded",
-    updateTheme
-  );
-  document.removeEventListener(
-    "comfy:setting:litegraph-node-search",
+  app.ui.settings.removeEventListener("Comfy.ColorPalette.change", updateTheme);
+  app.ui.settings.removeEventListener(
+    "Comfy.NodeSearchBoxImpl.change",
     updateNodeSearchSetting
   );
 });

src/components/sidebar/SideBarThemeToggleIcon.vue

@@ -3,12 +3,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from "vue";
+import { computed, onMounted, onUnmounted, ref, watch } from "vue";
 import SideBarIcon from "./SideBarIcon.vue";
 import { app } from "@/scripts/app";
 
 const isDarkMode = ref(false);
-const icon = computed(() => (isDarkMode.value ? "pi pi-sun" : "pi pi-moon"));
+const icon = computed(() => (isDarkMode.value ? "pi pi-moon" : "pi pi-sun"));
 const themeId = computed(() => (isDarkMode.value ? "dark" : "light"));
 const toggleTheme = () => {
   isDarkMode.value = !isDarkMode.value;
@@ -17,4 +17,17 @@ const toggleTheme = () => {
 watch(themeId, (newThemeId) => {
   app.ui.settings.setSettingValue("Comfy.ColorPalette", newThemeId);
 });
+
+const updateTheme = (e) => {
+  isDarkMode.value = e.detail.value !== "light";
+};
+
+onMounted(() => {
+  app.ui.settings.addEventListener("Comfy.ColorPalette.change", updateTheme);
+  app.ui.settings.refreshSetting("Comfy.ColorPalette");
+});
+
+onUnmounted(() => {
+  app.ui.settings.removeEventListener("Comfy.ColorPalette.change", updateTheme);
+});
 </script>

src/extensions/core/colorPalette.ts

@@ -672,12 +672,6 @@ app.registerExtension({
         }
         app.canvas.draw(true, true);
       }
-
-      document.dispatchEvent(
-        new CustomEvent("comfy:setting:color-palette-loaded", {
-          detail: colorPalette,
-        })
-      );
     };
 
     const getColorPalette = (colorPaletteId?) => {

src/scripts/ui.ts

@@ -7,8 +7,6 @@ import { TaskItem } from "@/types/apiTypes";
 
 export const ComfyDialog = _ComfyDialog;
 
-export type LiteGraphNodeSearchSettingEvent = CustomEvent<boolean>;
-
 type Position2D = {
   x: number;
   y: number;
@@ -434,11 +432,6 @@ export class ComfyUI {
         value = value || "default";
         const useLitegraphSearch = value === "litegraph (legacy)";
         app.canvas.allow_searchbox = useLitegraphSearch;
-        document.dispatchEvent(
-          new CustomEvent("comfy:setting:litegraph-node-search", {
-            detail: useLitegraphSearch,
-          })
-        );
       },
     });
 

src/types/colorPalette.ts

@@ -93,4 +93,3 @@ const colorPalettesSchema = z.record(paletteSchema);
 export type Colors = z.infer<typeof colorsSchema>;
 export type Palette = z.infer<typeof paletteSchema>;
 export type ColorPalettes = z.infer<typeof colorPalettesSchema>;
-export type ColorPaletteLoadedEvent = CustomEvent<Palette>;