From 04c23001fc5eefb29013112f3fff30b64a242d6c Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Thu, 9 Jan 2025 19:35:22 -0500
Subject: [PATCH] [Desktop] Set window action buttons style (#2214)

---
 src/components/topbar/TopMenubar.vue     | 10 +++++++++-
 src/views/GraphView.vue                  |  8 ++++++++
 src/views/templates/BaseViewTemplate.vue | 20 ++++++++++++++++++++
 vite.electron.config.mts                 |  3 ++-
 4 files changed, 39 insertions(+), 2 deletions(-)

diff --git a/src/components/topbar/TopMenubar.vue b/src/components/topbar/TopMenubar.vue
index c41fffe90..8c703d38e 100644
--- a/src/components/topbar/TopMenubar.vue
+++ b/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>
diff --git a/src/views/GraphView.vue b/src/views/GraphView.vue
index 0fa3bb23a..304977bc3 100644
--- a/src/views/GraphView.vue
+++ b/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 }
 )
diff --git a/src/views/templates/BaseViewTemplate.vue b/src/views/templates/BaseViewTemplate.vue
index e6ce2c3c3..e55a82ec8 100644
--- a/src/views/templates/BaseViewTemplate.vue
+++ b/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>
diff --git a/vite.electron.config.mts b/vite.electron.config.mts
index 53d9f6305..ac98946cf 100644
--- a/vite.electron.config.mts
+++ b/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: () => {}
         };`
       }
     ]