automatic dark/light theme - fixes #3934

tabby-core/src/api/platform.ts

@@ -86,14 +86,18 @@ export interface FileUploadOptions {
     multiple: boolean
 }
 
+export type PlatformTheme = 'light'|'dark'
+
 export abstract class PlatformService {
     supportsWindowControls = false
 
     get fileTransferStarted$ (): Observable<FileTransfer> { return this.fileTransferStarted }
     get displayMetricsChanged$ (): Observable<void> { return this.displayMetricsChanged }
+    get themeChanged$ (): Observable<PlatformTheme> { return this.themeChanged }
 
     protected fileTransferStarted = new Subject<FileTransfer>()
     protected displayMetricsChanged = new Subject<void>()
+    protected themeChanged = new Subject<PlatformTheme>()
 
     abstract readClipboard (): string
     abstract setClipboard (content: ClipboardContent): void
@@ -169,6 +173,10 @@ export abstract class PlatformService {
         throw new Error('Not implemented')
     }
 
+    getTheme (): PlatformTheme {
+        return 'dark'
+    }
+
     abstract getOSRelease (): string
     abstract getAppVersion (): string
     abstract openExternal (url: string): void

tabby-core/src/configDefaults.yaml

@@ -11,7 +11,7 @@ appearance:
   tabsLocation: top
   tabsInFullscreen: false
   cycleTabs: true
-  theme: Standard
+  theme: Follow the color scheme
   frame: thin
   css: '/* * { color: blue !important; } */'
   opacity: 1.0

tabby-core/src/services/themes.service.ts

@@ -3,6 +3,7 @@ import { Subject, Observable } from 'rxjs'
 import * as Color from 'color'
 import { ConfigService } from '../services/config.service'
 import { Theme } from '../api/theme'
+import { PlatformService } from '../api/platform'
 import { NewTheme } from '../theme'
 
 @Injectable({ providedIn: 'root' })
@@ -17,6 +18,7 @@ export class ThemesService {
     private constructor (
         private config: ConfigService,
         private standardTheme: NewTheme,
+        private platform: PlatformService,
         @Inject(Theme) private themes: Theme[],
     ) {
         this.rootElementStyleBackup = document.documentElement.style.cssText
@@ -24,6 +26,10 @@ export class ThemesService {
         config.ready$.toPromise().then(() => {
             this.applyCurrentTheme()
             this.applyThemeVariables()
+            platform.themeChanged$.subscribe(() => {
+                this.applyCurrentTheme()
+                this.applyThemeVariables()
+            })
             config.changed$.subscribe(() => {
                 this.applyCurrentTheme()
                 this.applyThemeVariables()
@@ -36,7 +42,7 @@ export class ThemesService {
             document.documentElement.style.cssText = this.rootElementStyleBackup
         }
 
-        const theme = this.config.store.terminal.colorScheme
+        const theme = this._getActiveColorScheme()
         const isDark = Color(theme.background).luminosity() < Color(theme.foreground).luminosity()
 
         function more (some, factor) {
@@ -106,8 +112,10 @@ export class ThemesService {
 
             const themeColors = {
                 primary: theme.colors[accentIndex],
-                secondary: less(theme.background, 0.5).string(),
-                tertiary: theme.colors[8],
+                secondary: isDark
+                    ? less(theme.background, 0.5).string()
+                    : less(theme.background, 0.125).string(),
+                tertiary: more(theme.background, 0.75).string(),
                 warning: theme.colors[3],
                 danger: theme.colors[1],
                 success: theme.colors[2],
@@ -184,6 +192,15 @@ export class ThemesService {
         return this.findTheme(this.config.store.appearance.theme) ?? this.standardTheme
     }
 
+    /// @hidden
+    _getActiveColorScheme (): any {
+        if (this.platform.getTheme() === 'light') {
+            return this.config.store.terminal.lightColorScheme
+        } else {
+            return this.config.store.terminal.colorScheme
+        }
+    }
+
     applyTheme (theme: Theme): void {
         if (!this.styleElement) {
             this.styleElement = document.createElement('style')

tabby-core/src/theme.new.scss

@@ -110,7 +110,7 @@ body {
 }
 
 .nav {
-    --bs-nav-link-color: var(--theme-fg);
+    --bs-nav-link-color: var(--theme-fg-more);
     --bs-nav-link-hover-color: var(--theme-fg-less);
     --bs-nav-link-disabled-color: var(--bs-gray);
 }
@@ -119,8 +119,8 @@ body {
     --bs-nav-tabs-border-width: 2px;
     --bs-nav-tabs-border-radius: 0;
     --bs-nav-tabs-link-hover-border-color: var(--bs-body-bg);
-    --bs-nav-tabs-border-color: var(--theme-fg-less-2);
-    --bs-nav-tabs-link-active-color: var(--theme-fg-less-2);
+    --bs-nav-tabs-border-color: var(--theme-fg);
+    --bs-nav-tabs-link-active-color: var(--theme-fg);
 
     --bs-nav-tabs-link-active-bg: transparent;
     --bs-nav-tabs-link-active-border-color: transparent;