From a4e08f60fe1829054497584386f1c8abbf441fa3 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Mon, 7 Oct 2024 21:54:58 -0400
Subject: [PATCH] Extract theme toggle as command (#1161)

* Extract theme toggle as command

* nit
---
 .../sidebar/SidebarThemeToggleIcon.vue        | 20 ++++++++----------
 src/stores/commandStore.ts                    | 21 +++++++++++++++++++
 2 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/components/sidebar/SidebarThemeToggleIcon.vue b/src/components/sidebar/SidebarThemeToggleIcon.vue
index 3b92db99a..18a6799eb 100644
--- a/src/components/sidebar/SidebarThemeToggleIcon.vue
+++ b/src/components/sidebar/SidebarThemeToggleIcon.vue
@@ -8,21 +8,19 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 import SidebarIcon from './SidebarIcon.vue'
 import { useSettingStore } from '@/stores/settingStore'
+import { useCommandStore } from '@/stores/commandStore'
 
-const previousDarkTheme = ref('dark')
-const currentTheme = computed(() => useSettingStore().get('Comfy.ColorPalette'))
-const isDarkMode = computed(() => currentTheme.value !== 'light')
-const icon = computed(() => (isDarkMode.value ? 'pi pi-moon' : 'pi pi-sun'))
+const settingStore = useSettingStore()
+const currentTheme = computed(() => settingStore.get('Comfy.ColorPalette'))
+const icon = computed(() =>
+  currentTheme.value !== 'light' ? 'pi pi-moon' : 'pi pi-sun'
+)
 
+const commandStore = useCommandStore()
 const toggleTheme = () => {
-  if (isDarkMode.value) {
-    previousDarkTheme.value = currentTheme.value
-    useSettingStore().set('Comfy.ColorPalette', 'light')
-  } else {
-    useSettingStore().set('Comfy.ColorPalette', previousDarkTheme.value)
-  }
+  commandStore.execute('Comfy.ToggleTheme')
 }
 </script>
diff --git a/src/stores/commandStore.ts b/src/stores/commandStore.ts
index 9bd7ef708..d246fc6fc 100644
--- a/src/stores/commandStore.ts
+++ b/src/stores/commandStore.ts
@@ -436,6 +436,27 @@ export const useCommandStore = defineStore('command', () => {
           node.collapse()
         })
       }
+    },
+    {
+      id: 'Comfy.ToggleTheme',
+      icon: 'pi pi-moon',
+      label: 'Toggle Theme',
+      versionAdded: '1.3.12',
+      function: (() => {
+        let previousDarkTheme: string = 'dark'
+
+        // Official light theme is the only light theme supported now.
+        const isDarkMode = (themeId: string) => themeId !== 'light'
+        return () => {
+          const currentTheme = settingStore.get('Comfy.ColorPalette')
+          if (isDarkMode(currentTheme)) {
+            previousDarkTheme = currentTheme
+            settingStore.set('Comfy.ColorPalette', 'light')
+          } else {
+            settingStore.set('Comfy.ColorPalette', previousDarkTheme)
+          }
+        }
+      })()
     }
   ]