Add support for custom light theme

src/assets/palettes/light.json

@@ -1,6 +1,7 @@
 {
   "id": "light",
   "name": "Light",
+  "light_theme": true,
   "colors": {
     "node_slot": {
       "CLIP": "#FFA726",

src/components/sidebar/SidebarThemeToggleIcon.vue

@@ -11,14 +11,15 @@
 import { computed } from 'vue'
 
 import { useCommandStore } from '@/stores/commandStore'
-import { useSettingStore } from '@/stores/settingStore'
+import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 
 import SidebarIcon from './SidebarIcon.vue'
 
-const settingStore = useSettingStore()
-const currentTheme = computed(() => settingStore.get('Comfy.ColorPalette'))
+const colorPaletteStore = useColorPaletteStore()
 const icon = computed(() =>
-  currentTheme.value !== 'light' ? 'pi pi-moon' : 'pi pi-sun'
+  colorPaletteStore.completedActivePalette.light_theme
+    ? 'pi pi-sun'
+    : 'pi pi-moon'
 )
 
 const commandStore = useCommandStore()

src/hooks/coreCommandHooks.ts

@@ -7,6 +7,7 @@ import {
 
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
+import { useColorPaletteService } from '@/services/colorPaletteService'
 import { useDialogService } from '@/services/dialogService'
 import { useWorkflowService } from '@/services/workflowService'
 import type { ComfyCommand } from '@/stores/commandStore'
@@ -16,13 +17,16 @@ import { useSettingStore } from '@/stores/settingStore'
 import { useToastStore } from '@/stores/toastStore'
 import { type ComfyWorkflow, useWorkflowStore } from '@/stores/workflowStore'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
+import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useSearchBoxStore } from '@/stores/workspace/searchBoxStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 
 export function useCoreCommands(): ComfyCommand[] {
   const workflowService = useWorkflowService()
   const workflowStore = useWorkflowStore()
   const dialogService = useDialogService()
+  const colorPaletteStore = useColorPaletteStore()
+  const colorPaletteService = useColorPaletteService()
   const getTracker = () => workflowStore.activeWorkflow?.changeTracker
 
   const getSelectedNodes = (): LGraphNode[] => {
@@ -411,16 +415,16 @@ export function useCoreCommands(): ComfyCommand[] {
       versionAdded: '1.3.12',
       function: (() => {
         let previousDarkTheme: string = 'dark'
+        let previousLightTheme: string = 'light'
 
-        // Official light theme is the only light theme supported now.
-        const isDarkMode = (themeId: string) => themeId !== 'light'
         return () => {
           const settingStore = useSettingStore()
-          const currentTheme = settingStore.get('Comfy.ColorPalette')
-          if (isDarkMode(currentTheme)) {
-            previousDarkTheme = currentTheme
-            settingStore.set('Comfy.ColorPalette', 'light')
+          const theme = colorPaletteStore.completedActivePalette
+          if (theme.light_theme) {
+            previousLightTheme = theme.id
+            settingStore.set('Comfy.ColorPalette', previousLightTheme)
           } else {
+            previousDarkTheme = theme.id
             settingStore.set('Comfy.ColorPalette', previousDarkTheme)
           }
         }

src/types/colorPaletteTypes.ts

@@ -92,7 +92,8 @@ export const paletteSchema = z
   .object({
     id: z.string(),
     name: z.string(),
-    colors: partialColorsSchema
+    colors: partialColorsSchema,
+    light_theme: z.boolean().optional()
   })
   .passthrough()
 

src/views/GraphView.vue

@@ -13,7 +13,7 @@
 import { useEventListener } from '@vueuse/core'
 import type { ToastMessageOptions } from 'primevue/toast'
 import { useToast } from 'primevue/usetoast'
-import { computed, onBeforeUnmount, onMounted, watch, watchEffect } from 'vue'
+import { onBeforeUnmount, onMounted, watch, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import BrowserTabTitle from '@/components/BrowserTabTitle.vue'
@@ -41,6 +41,7 @@ import {
 import { useServerConfigStore } from '@/stores/serverConfigStore'
 import { useSettingStore } from '@/stores/settingStore'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
+import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { StatusWsMessageStatus } from '@/types/apiTypes'
@@ -51,18 +52,16 @@ const { t } = useI18n()
 const toast = useToast()
 const settingStore = useSettingStore()
 const executionStore = useExecutionStore()
-
-const theme = computed<string>(() => settingStore.get('Comfy.ColorPalette'))
+const colorPaletteStore = useColorPaletteStore()
 
 watch(
-  theme,
+  () => colorPaletteStore.completedActivePalette,
   (newTheme) => {
     const DARK_THEME_CLASS = 'dark-theme'
-    const isDarkTheme = newTheme !== 'light'
-    if (isDarkTheme) {
-      document.body.classList.add(DARK_THEME_CLASS)
-    } else {
+    if (newTheme.light_theme) {
       document.body.classList.remove(DARK_THEME_CLASS)
+    } else {
+      document.body.classList.add(DARK_THEME_CLASS)
     }
   },
   { immediate: true }