From 9d108b80b932a532b5263c906e3a03cd6f409240 Mon Sep 17 00:00:00 2001
From: filtered <176114999+webfiltered@users.noreply.github.com>
Date: Sat, 11 Jan 2025 18:02:55 +1100
Subject: [PATCH] Add hover colour to native window controls

---
 src/views/GraphView.vue | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/src/views/GraphView.vue b/src/views/GraphView.vue
index 0fa3bb23a3..ab20d2529f 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,25 @@ watch(
     } else {
       document.body.classList.add(DARK_THEME_CLASS)
     }
+
+    // Native window control theme
+    if (isElectron()) {
+      const cssVars = newTheme.colors.comfy_base
+      // Allow OS to set matching hover colour
+      const color = setZeroAlpha(cssVars['comfy-menu-bg'])
+      const symbolColor = cssVars['input-text']
+      electronAPI().changeTheme({ color, symbolColor })
+    }
+
+    function setZeroAlpha(color: string) {
+      if (!color.startsWith('#')) return color
+
+      if (color.length === 4) {
+        const [_, r, g, b] = color
+        return `#${r}${r}${g}${g}${b}${b}00`
+      }
+      return `#${color.substring(1, 7)}00`
+    }
   },
   { immediate: true }
 )