From 4c4b1f04c815ae736723c02f307a47af2b4fba51 Mon Sep 17 00:00:00 2001
From: nguyenhuukhoi <nguyenhuukhoinw@gmail.com>
Date: Fri, 8 May 2026 03:17:25 +0700
Subject: [PATCH] Fix themed backgrounds for side tabs and title bar (#11219)

Co-authored-by: nguyenhuukhoisa <nguyenhuukhoisa@gmail.com>
---
 tabby-core/src/components/appRoot.component.scss        | 2 +-
 tabby-core/src/components/titleBar.component.scss       | 7 +++++++
 tabby-core/src/components/windowControls.component.scss | 8 ++++++++
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/tabby-core/src/components/appRoot.component.scss b/tabby-core/src/components/appRoot.component.scss
index 15cab868..de1f0e78 100644
--- a/tabby-core/src/components/appRoot.component.scss
+++ b/tabby-core/src/components/appRoot.component.scss
@@ -50,7 +50,7 @@ $tab-border-radius: 4px;
     overflow-y: auto;
     overflow-x: hidden;
     flex-direction: column;
-    background: rgba(0, 0, 0, 0.25);
+    background: var(--theme-bg-more-2);
 
     .tabs {
         width: var(--side-tab-width);
diff --git a/tabby-core/src/components/titleBar.component.scss b/tabby-core/src/components/titleBar.component.scss
index e648eecf..c54e7603 100644
--- a/tabby-core/src/components/titleBar.component.scss
+++ b/tabby-core/src/components/titleBar.component.scss
@@ -3,12 +3,19 @@ $titlebar-height: 30px;
 :host {
     flex: 0 0 $titlebar-height;
     display: flex;
+    background: var(--theme-bg-more-2);
+    color: var(--bs-body-color);
 
     .title {
         flex: auto;
         padding-left: 15px;
         line-height: $titlebar-height;
         -webkit-app-region: drag;
+        color: var(--bs-body-color);
+    }
+
+    window-controls {
+        background: transparent;
     }
 
     &.inset {
diff --git a/tabby-core/src/components/windowControls.component.scss b/tabby-core/src/components/windowControls.component.scss
index c7364a8f..7c2c3acd 100644
--- a/tabby-core/src/components/windowControls.component.scss
+++ b/tabby-core/src/components/windowControls.component.scss
@@ -1,5 +1,7 @@
 :host {
     display: flex;
+    background: transparent;
+    color: inherit;
 }
 
 button {
@@ -7,6 +9,8 @@ button {
     border: none;
     box-shadow: none;
     border-radius: 0;
+    background: transparent !important;
+    color: inherit !important;
     font-size: 8px;
     width: 40px;
     padding: 0;
@@ -26,5 +30,9 @@ button {
     svg {
         width: 10px;
         height: 10px;
+
+        path {
+            fill: currentColor;
+        }
     }
 }