fix: WCO color, settings icon position

app/lib/window.ts

@@ -96,11 +96,9 @@ export class Window {
                 bwOptions.titleBarStyle = 'hidden'
                 // If not macOS and native appearance is not toggled, use WCO.
             } else {
-                bwOptions.titleBarStyle = 'hidden',
+                bwOptions.titleBarStyle = 'hidden'
                 bwOptions.titleBarOverlay = {
                     color: '#00000000',
-                    symbolColor: '#ffffff',
-                    height: 32,
                 }
             }
         }
@@ -394,6 +392,23 @@ export class Window {
             this.setVibrancy(enabled, type)
         })
 
+        ipcMain.on('window-set-window-controls-color', (event, theme) => {
+            if (!this.window || event.sender !== this.window.webContents) {
+                return
+            }
+
+            // let color: string = theme.backgroundMore
+            let symbolColor: string = theme.foreground
+
+            this.window.setTitleBarOverlay(
+                {
+                    // color: '#00000000',
+                    symbolColor: symbolColor,
+                    height: 32,
+                }
+            )
+        })
+
         ipcMain.on('window-set-title', (event, title) => {
             if (!this.window || event.sender !== this.window.webContents) {
                 return

tabby-core/src/components/appRoot.component.pug

@@ -88,6 +88,11 @@ title-bar(
             && (hostApp.platform == Platform.Linux)',
         )
 
+        div.window-controls-spacer(
+            *ngIf='config.store.appearance.frame == "thin" \
+            && (hostApp.platform == Platform.Windows)',
+        )
+
     .content
         start-page.content-tab.content-tab-active(*ngIf='ready && app.tabs.length == 0')
 

tabby-core/src/components/appRoot.component.scss

@@ -142,6 +142,11 @@ $tab-border-radius: 4px;
         }
     }
 
+    &>.window-controls-spacer {
+        min-width: 138px;
+        height: 100%;
+    }
+
     & > .inset {
         width: calc(70px + 15px * var(--spaciness));
         height: var(--tabs-height);

tabby-electron/src/index.ts

@@ -99,6 +99,7 @@ export default class ElectronModule {
             })
             this.registerGlobalHotkey()
             this.updateVibrancy()
+            this.updateWindowControlsColor()
         })
 
         config.changed$.subscribe(() => {
@@ -131,6 +132,8 @@ export default class ElectronModule {
 
         config.changed$.subscribe(() => this.updateVibrancy())
 
+        config.changed$.subscribe(() => this.updateWindowControlsColor())
+
         config.ready$.toPromise().then(() => {
             dockMenu.update()
         })
@@ -169,6 +172,15 @@ export default class ElectronModule {
 
         this.hostWindow.setOpacity(this.config.store.appearance.opacity)
     }
+
+    private updateWindowControlsColor () {
+        // if windows and not using native frame, WCO does not exist, return.
+        if (this.hostApp.platform === Platform.Windows && this.config.store.appearance.frame == "native") {
+            return
+        }
+
+        this.electron.ipcRenderer.send('window-set-window-controls-color', this.config.store.terminal.colorScheme)
+    }
 }
 
 export { ElectronHostWindow, ElectronHostAppService, ElectronService }