refactor: Dark Theme for Portal TabContainer (#8742)

tobiu · tobiu · commit 59b01782ed23 · 2026-01-17T00:33:44.000+01:00
diff --git a/resources/scss/src/apps/portal/shared/TabContainer.scss b/resources/scss/src/apps/portal/shared/TabContainer.scss
@@ -8,40 +8,40 @@
 
     .neo-tab-strip {
         .neo-active-tab-indicator {
-            background-color: #3E63DD;
+            background-color: var(--portal-tab-indicator-bg);
         }
     }
 }
 
 // must not be inside the root class to honor the styling for tab button drag&drop
 .portal-shared-tab-header-toolbar.neo-tab-header-toolbar {
-    background-color: #8BA6FF;
+    background-color: var(--portal-tab-toolbar-bg);
 
     .neo-tab-header-button.neo-button {
         .neo-button-glyph {
-            color: #fff;
+            color: var(--portal-tab-text-color);
         }
 
         .neo-button-ripple {
-            background-color: #3E63DD;
+            background-color: var(--portal-tab-indicator-bg);
         }
 
         &.neo-button.pressed .neo-tab-button-indicator {
-            background-color: #3E63DD;
+            background-color: var(--portal-tab-indicator-bg);
         }
 
         .neo-button-text {
-            color: #fff;
+            color: var(--portal-tab-text-color);
         }
 
         &.pressed {
             .neo-button-glyph {
-                color: #3E63DD;
+                color: var(--portal-tab-text-color-pressed);
             }
         }
     }
 
     .neo-tab-strip .neo-active-tab-indicator {
-        background-color: #3E63DD;
+        background-color: var(--portal-tab-indicator-bg);
     }
 }
diff --git a/resources/scss/theme-neo-dark/apps/portal/shared/TabContainer.scss b/resources/scss/theme-neo-dark/apps/portal/shared/TabContainer.scss
@@ -0,0 +1,6 @@
+:root .neo-theme-neo-dark {
+    --portal-tab-indicator-bg    : var(--sem-color-bg-primary-default);
+    --portal-tab-text-color      : var(--sem-color-text-neutral-contrast);
+    --portal-tab-text-color-pressed: var(--sem-color-text-primary-default);
+    --portal-tab-toolbar-bg      : var(--sem-color-bg-primary-hover);
+}
diff --git a/resources/scss/theme-neo-light/apps/portal/shared/TabContainer.scss b/resources/scss/theme-neo-light/apps/portal/shared/TabContainer.scss
@@ -0,0 +1,6 @@
+:root .neo-theme-neo-light {
+    --portal-tab-indicator-bg    : #3E63DD;
+    --portal-tab-text-color      : #fff;
+    --portal-tab-text-color-pressed: #3E63DD;
+    --portal-tab-toolbar-bg      : #8BA6FF;
+}

Original file line number	Diff line number	Diff line change
`@@ -8,40 +8,40 @@`
`8`	`8`
`9`	`9`	`.neo-tab-strip {`
`10`	`10`	`.neo-active-tab-indicator {`
`11`		`- background-color: #3E63DD;`
	`11`	`+ background-color: var(--portal-tab-indicator-bg);`
`12`	`12`	`}`
`13`	`13`	`}`
`14`	`14`	`}`
`15`	`15`
`16`	`16`	`// must not be inside the root class to honor the styling for tab button drag&drop`
`17`	`17`	`.portal-shared-tab-header-toolbar.neo-tab-header-toolbar {`
`18`		`- background-color: #8BA6FF;`
	`18`	`+ background-color: var(--portal-tab-toolbar-bg);`
`19`	`19`
`20`	`20`	`.neo-tab-header-button.neo-button {`
`21`	`21`	`.neo-button-glyph {`
`22`		`- color: #fff;`
	`22`	`+ color: var(--portal-tab-text-color);`
`23`	`23`	`}`
`24`	`24`
`25`	`25`	`.neo-button-ripple {`
`26`		`- background-color: #3E63DD;`
	`26`	`+ background-color: var(--portal-tab-indicator-bg);`
`27`	`27`	`}`
`28`	`28`
`29`	`29`	`&.neo-button.pressed .neo-tab-button-indicator {`
`30`		`- background-color: #3E63DD;`
	`30`	`+ background-color: var(--portal-tab-indicator-bg);`
`31`	`31`	`}`
`32`	`32`
`33`	`33`	`.neo-button-text {`
`34`		`- color: #fff;`
	`34`	`+ color: var(--portal-tab-text-color);`
`35`	`35`	`}`
`36`	`36`
`37`	`37`	`&.pressed {`
`38`	`38`	`.neo-button-glyph {`
`39`		`- color: #3E63DD;`
	`39`	`+ color: var(--portal-tab-text-color-pressed);`
`40`	`40`	`}`
`41`	`41`	`}`
`42`	`42`	`}`
`43`	`43`
`44`	`44`	`.neo-tab-strip .neo-active-tab-indicator {`
`45`		`- background-color: #3E63DD;`
	`45`	`+ background-color: var(--portal-tab-indicator-bg);`
`46`	`46`	`}`
`47`	`47`	`}`