Use tab.hoverBackground and tab.hoverBorder colors

eclipse-theia · Apr 11, 2022 · 45f7a3b · 45f7a3b
1 parent 235ec55
commit 45f7a3b
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 0 deletions.
diff --git a/packages/core/src/browser/common-frontend-contribution.ts b/packages/core/src/browser/common-frontend-contribution.ts
@@ -1484,6 +1484,10 @@ export class CommonFrontendContribution implements FrontendApplicationContributi
             },
             {
                 id: 'tab.hoverBackground',
+                defaults: {
+                    dark: 'tab.inactiveBackground',
+                    light: 'tab.inactiveBackground'
+                },
                 description: 'Tab background color when hovering. Tabs are the containers for editors in the editor area. Multiple tabs can be opened in one editor group. There can be multiple editor groups.'
             },
             {

diff --git a/packages/core/src/browser/style/tabs.css b/packages/core/src/browser/style/tabs.css
@@ -84,6 +84,16 @@
     color: var(--theia-tab-inactiveForeground);
 }
 
+#theia-main-content-panel .p-TabBar .p-TabBar-tab:hover {
+    background: var(--theia-tab-hoverBackground);
+    box-shadow: 0 1px 0 var(--theia-tab-hoverBorder) inset;
+}
+
+#theia-main-content-panel .p-TabBar:not(.theia-tabBar-active) .p-TabBar-tab:hover {
+    background: var(--theia-tab-unfocusedHoverBackground);
+    box-shadow: 0 1px 0 var(--theia-tab-unfocusedHoverBorder) inset;
+}
+
 #theia-main-content-panel .p-TabBar .p-TabBar-tab.p-mod-current {
     background: var(--theia-tab-activeBackground);
     color: var(--theia-tab-activeForeground);