Fix hover & text colour of native buttons

- All views now have full native-themed buttons

src/views/DownloadGitView.vue

@@ -48,7 +48,9 @@
 </template>
 
 <script setup lang="ts">
+import { electronAPI } from '@/utils/envUtil'
 import Button from 'primevue/button'
+import { onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 
 const openGitDownloads = () => {
@@ -60,4 +62,8 @@ const skipGit = () => {
   const router = useRouter()
   router.push('install')
 }
+
+onMounted(() => {
+  electronAPI()?.changeTheme({ color: '#d4d4d4', symbolColor: '#171717' })
+})
 </script>

src/views/GraphView.vue

@@ -42,6 +42,11 @@ import { SERVER_CONFIG_ITEMS } from '@/constants/serverConfig'
 import { useMenuItemStore } from '@/stores/menuItemStore'
 import { useCommandStore } from '@/stores/commandStore'
 import { useCoreCommands } from '@/hooks/coreCommandHooks'
+import {
+  defaultColorPalette,
+  getColorPalette
+} from '@/extensions/core/colorPalette'
+import { electronAPI, isElectron } from '@/utils/envUtil'
 
 setupAutoQueueHandler()
 
@@ -51,6 +56,7 @@ const settingStore = useSettingStore()
 const executionStore = useExecutionStore()
 
 const theme = computed<string>(() => settingStore.get('Comfy.ColorPalette'))
+const defaultCssVars = defaultColorPalette.colors.comfy_base
 
 watch(
   theme,
@@ -62,6 +68,18 @@ watch(
     } else {
       document.body.classList.remove(DARK_THEME_CLASS)
     }
+
+    // Native window control theme
+    if (isElectron()) {
+      const cssVars = getColorPalette(newTheme).colors.comfy_base
+      let color = cssVars['comfy-menu-bg'] ?? defaultCssVars['comfy-menu-bg']
+      if (color.startsWith('#')) {
+        if (color.length === 4) color = `#${color.substring(1).repeat(2)}`
+        color = `#${color.substring(1, 7)}00`
+      }
+      const symbolColor = cssVars['input-text'] ?? defaultCssVars['input-text']
+      electronAPI().changeTheme({ color, symbolColor })
+    }
   },
   { immediate: true }
 )

src/views/InstallView.vue

@@ -88,7 +88,7 @@ import InstallLocationPicker from '@/components/install/InstallLocationPicker.vu
 import MigrationPicker from '@/components/install/MigrationPicker.vue'
 import DesktopSettingsConfiguration from '@/components/install/DesktopSettingsConfiguration.vue'
 import { electronAPI } from '@/utils/envUtil'
-import { ref, computed, toRaw } from 'vue'
+import { ref, computed, toRaw, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 
 const installPath = ref('')
@@ -114,6 +114,10 @@ const install = () => {
   electronAPI().installComfyUI(options)
   router.push('/server-start')
 }
+
+onMounted(() => {
+  electronAPI()?.changeTheme({ color: '#171717', symbolColor: '#d4d4d4' })
+})
 </script>
 
 <style scoped>

src/views/NotSupportedView.vue

@@ -58,7 +58,9 @@
 </template>
 
 <script setup lang="ts">
+import { electronAPI } from '@/utils/envUtil'
 import Button from 'primevue/button'
+import { onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 
 const openDocs = () => {
@@ -76,4 +78,8 @@ const router = useRouter()
 const continueToInstall = () => {
   router.push('/install')
 }
+
+onMounted(() => {
+  electronAPI()?.changeTheme({ color: '#d4d4d4', symbolColor: '#171717' })
+})
 </script>

src/views/ServerStartView.vue

@@ -82,6 +82,7 @@ onMounted(async () => {
   electron.sendReady()
   electron.onProgressUpdate(updateProgress)
   electronVersion.value = await electron.getElectronVersion()
+  electron.changeTheme({ color: '#171717', symbolColor: '#d4d4d4' })
 })
 </script>
 

src/views/UserSelectView.vue

@@ -49,6 +49,7 @@ import Message from 'primevue/message'
 import { User, useUserStore } from '@/stores/userStore'
 import { useRouter } from 'vue-router'
 import { computed, onMounted, ref } from 'vue'
+import { electronAPI } from '@/utils/envUtil'
 
 const userStore = useUserStore()
 const router = useRouter()
@@ -83,6 +84,8 @@ const login = async () => {
 }
 
 onMounted(async () => {
+  electronAPI()?.changeTheme({ color: '#171717', symbolColor: '#d4d4d4' })
+
   if (!userStore.initialized) {
     await userStore.initialize()
   }

src/views/WelcomeView.vue

@@ -23,13 +23,19 @@
 </template>
 
 <script setup lang="ts">
+import { electronAPI } from '@/utils/envUtil'
 import Button from 'primevue/button'
+import { onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
 const navigateTo = (path: string) => {
   router.push(path)
 }
+
+onMounted(() => {
+  electronAPI()?.changeTheme({ color: '#171717', symbolColor: '#d4d4d4' })
+})
 </script>
 
 <style scoped>