[Desktop] Set window action buttons style (#2214)

src/components/topbar/TopMenubar.vue

@@ -42,7 +42,7 @@ import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
 import { app } from '@/scripts/app'
 import { useSettingStore } from '@/stores/settingStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
-import { showNativeMenu } from '@/utils/envUtil'
+import { electronAPI, isElectron, showNativeMenu } from '@/utils/envUtil'
 
 const workspaceState = useWorkspaceStore()
 const settingStore = useSettingStore()
@@ -77,6 +77,14 @@ eventBus.on((event: string, payload: any) => {
     isDroppable.value = payload.isOverlapping && payload.isDragging
   }
 })
+
+onMounted(() => {
+  if (isElectron()) {
+    electronAPI().changeTheme({
+      height: topMenuRef.value.getBoundingClientRect().height
+    })
+  }
+})
 </script>
 
 <style scoped>

src/views/GraphView.vue

@@ -46,6 +46,7 @@ import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
 import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { StatusWsMessageStatus } from '@/types/apiTypes'
+import { electronAPI, isElectron } from '@/utils/envUtil'
 
 setupAutoQueueHandler()
 
@@ -64,6 +65,13 @@ watch(
     } else {
       document.body.classList.add(DARK_THEME_CLASS)
     }
+
+    if (isElectron()) {
+      electronAPI().changeTheme({
+        color: 'rgba(0, 0, 0, 0)',
+        symbolColor: newTheme.colors.comfy_base['input-text']
+      })
+    }
   },
   { immediate: true }
 )

src/views/templates/BaseViewTemplate.vue

@@ -12,6 +12,10 @@
 </template>
 
 <script setup lang="ts">
+import { onMounted } from 'vue'
+
+import { electronAPI, isElectron } from '@/utils/envUtil'
+
 const props = withDefaults(
   defineProps<{
     dark: boolean
@@ -20,4 +24,20 @@ const props = withDefaults(
     dark: false
   }
 )
+
+const darkTheme = {
+  color: 'rgba(0, 0, 0, 0)',
+  symbolColor: '#d4d4d4'
+}
+
+const lightTheme = {
+  color: 'rgba(0, 0, 0, 0)',
+  symbolColor: '#171717'
+}
+
+onMounted(() => {
+  if (isElectron()) {
+    electronAPI().changeTheme(props.dark ? darkTheme : lightTheme)
+  }
+})
 </script>

vite.electron.config.mts

@@ -53,7 +53,8 @@ const mockElectronAPI: Plugin = {
           },
           getElectronVersion: () => Promise.resolve('1.0.0'),
           getComfyUIVersion: () => '9.9.9',
-          getPlatform: () => 'win32'
+          getPlatform: () => 'win32',
+          changeTheme: () => {}
         };`
       }
     ]