fixed #9894 - incorrect background color for profiles with custom color schemes

tabby-terminal/src/api/baseTerminalTab.component.ts

@@ -13,6 +13,7 @@ import { ResizeEvent, BaseTerminalProfile } from './interfaces'
 import { TerminalDecorator } from './decorator'
 import { SearchPanelComponent } from '../components/searchPanel.component'
 import { MultifocusService } from '../services/multifocus.service'
+import { getTerminalBackgroundColor } from '../helpers'
 
 
 const INACTIVE_TAB_UNLOAD_DELAY = 1000 * 30
@@ -575,14 +576,7 @@ export class BaseTerminalTabComponent<P extends BaseTerminalProfile> extends Bas
     configure (): void {
         this.frontend?.configure(this.profile)
 
-        if (!this.themes.findCurrentTheme().followsColorScheme && this.config.store.terminal.background === 'colorScheme') {
+        this.backgroundColor = getTerminalBackgroundColor(this.config, this.themes, this.profile.terminalColorScheme)
-            const scheme = this.profile.terminalColorScheme ?? this.config.store.terminal.colorScheme
-            if (scheme.background) {
-                this.backgroundColor = scheme.background
-            }
-        } else {
-            this.backgroundColor = null
-        }
     }
 
     zoomIn (): void {

tabby-terminal/src/frontends/xtermFrontend.ts

@@ -1,3 +1,4 @@
+import deepEqual from 'deep-equal'
 import { BehaviorSubject, filter, firstValueFrom, takeUntil } from 'rxjs'
 import { Injector } from '@angular/core'
 import { ConfigService, getCSSFontFamily, getWindows10Build, HostAppService, HotkeysService, Platform, PlatformService, ThemesService } from 'tabby-core'
@@ -11,9 +12,9 @@ import { Unicode11Addon } from '@xterm/addon-unicode11'
 import { SerializeAddon } from '@xterm/addon-serialize'
 import { ImageAddon } from '@xterm/addon-image'
 import { CanvasAddon } from '@xterm/addon-canvas'
-import './xterm.css'
-import deepEqual from 'deep-equal'
 import { BaseTerminalProfile, TerminalColorScheme } from '../api/interfaces'
+import { getTerminalBackgroundColor } from '../helpers'
+import './xterm.css'
 
 const COLOR_NAMES = [
     'black', 'red', 'green', 'yellow', 'blue', 'magenta', 'cyan', 'white',
@@ -361,21 +362,21 @@ export class XTermFrontend extends Frontend {
     }
 
     private configureColors (scheme: TerminalColorScheme|undefined): void {
-        const config = this.configService.store
+        const appColorScheme = this.themes._getActiveColorScheme() as TerminalColorScheme
 
-        scheme = scheme ?? this.themes._getActiveColorScheme()
+        scheme = scheme ?? appColorScheme
 
         const theme: ITheme = {
-            foreground: scheme!.foreground,
+            foreground: scheme.foreground,
-            selectionBackground: scheme!.selection ?? '#88888888',
+            selectionBackground: scheme.selection ?? '#88888888',
-            selectionForeground: scheme!.selectionForeground ?? undefined,
+            selectionForeground: scheme.selectionForeground ?? undefined,
-            background: !this.themes.findCurrentTheme().followsColorScheme && config.terminal.background === 'colorScheme' ? scheme!.background : '#00000000',
+            background: getTerminalBackgroundColor(this.configService, this.themes, scheme) ?? '#00000000',
-            cursor: scheme!.cursor,
+            cursor: scheme.cursor,
-            cursorAccent: scheme!.cursorAccent,
+            cursorAccent: scheme.cursorAccent,
         }
 
         for (let i = 0; i < COLOR_NAMES.length; i++) {
-            theme[COLOR_NAMES[i]] = scheme!.colors[i]
+            theme[COLOR_NAMES[i]] = scheme.colors[i]
         }
 
         if (!deepEqual(this.configuredTheme, theme)) {

tabby-terminal/src/helpers.ts

@@ -0,0 +1,21 @@
+import { TerminalColorScheme } from './api/interfaces'
+import { ConfigService, ThemesService } from 'tabby-core'
+
+export function getTerminalBackgroundColor (
+    config: ConfigService,
+    themes: ThemesService,
+    scheme?: TerminalColorScheme,
+): string|null {
+    const appTheme = themes.findCurrentTheme()
+    const appColorScheme = themes._getActiveColorScheme() as TerminalColorScheme
+
+    // Use non transparent background when:
+    // - legacy theme and user choses colorScheme based BG
+    // - or new theme but profile-specific scheme is used
+    const shouldUseCSBackground =
+        !appTheme.followsColorScheme && config.store.terminal.background === 'colorScheme'
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+        || appTheme.followsColorScheme && scheme?.name !== appColorScheme.name
+
+    return shouldUseCSBackground && scheme ? scheme.background : null
+}