Fix themed backgrounds for side tabs and title bar (#11219)

Co-authored-by: nguyenhuukhoisa <nguyenhuukhoisa@gmail.com>

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);

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 {

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;
+        }
     }
 }