Extract theme toggle as command (#1161)

* Extract theme toggle as command

* nit

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>

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)
+          }
+        }
+      })()
     }
   ]