wip

tabby-core/src/api/theme.ts

@@ -13,4 +13,5 @@ export abstract class Theme {
 
     macOSWindowButtonsInsetX?: number
     macOSWindowButtonsInsetY?: number
+    followsColorScheme?: boolean
 }

tabby-core/src/components/startPage.component.pug

@@ -1,10 +1,10 @@
-div
+.mt-5
     .tabby-logo
     h1.tabby-title Tabby
         sup α
 
     .list-group.mb-4
-        a.list-group-item.list-group-item-action.d-flex(
+        a.list-group-item.list-group-item-action.d-flex.pt-3.pb-3(
             *ngFor='let command of commands; trackBy: buttonsTrackBy',
             (click)='command.run()',
         )
@@ -13,10 +13,10 @@ div
 
 footer.d-flex.align-items-center
     .btn-group.me-auto
-        button.btn.btn-dark((click)='homeBase.openGitHub()')
+        button.btn.btn-link((click)='homeBase.openGitHub()')
             i.fab.fa-github
             span GitHub
-        button.btn.btn-dark((click)='homeBase.reportBug()')
+        button.btn.btn-link((click)='homeBase.reportBug()')
             i.fas.fa-bug
             span(translate) Report a problem
 

tabby-core/src/components/toggle.component.scss

@@ -4,17 +4,19 @@
     $height: 30px;
     $padding: 2px;
     display: inline-flex;
-    overflow: visible;
     border-radius: 3px;
     line-height: $height;
     height: $height;
     transition: 0.25s opacity;
     align-items: center;
-    overflow: hidden;
     padding-right: 10px;
     padding-left: 10px;
     margin-left: -10px;
 
+    .form-check {
+        margin: 0;
+    }
+
     &.disabled {
         opacity: 0.5;
     }
@@ -22,4 +24,8 @@
     * {
         cursor: pointer;
     }
+
+    label {
+        display: none;
+    }
 }

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 { NewTheme } from '../theme'
 
 @Injectable({ providedIn: 'root' })
 export class ThemesService {
@@ -10,13 +11,16 @@ export class ThemesService {
     private themeChanged = new Subject<Theme>()
 
     private styleElement: HTMLElement|null = null
+    private rootElementStyleBackup = ''
 
     /** @hidden */
     private constructor (
         private config: ConfigService,
+        private standardTheme: NewTheme,
         @Inject(Theme) private themes: Theme[],
     ) {
-        this.applyTheme(this.findTheme('Standard')!)
+        this.rootElementStyleBackup = document.documentElement.style.cssText
+        this.applyTheme(standardTheme)
         config.ready$.toPromise().then(() => {
             this.applyCurrentTheme()
             this.applyThemeVariables()
@@ -28,6 +32,11 @@ export class ThemesService {
     }
 
     private applyThemeVariables () {
+        if (!this.findCurrentTheme().followsColorScheme) {
+            document.documentElement.style.cssText = this.rootElementStyleBackup
+            return
+        }
+
         const theme = this.config.store.terminal.colorScheme
         const isDark = Color(theme.background).luminosity() < Color(theme.foreground).luminosity()
 
@@ -45,12 +54,17 @@ export class ThemesService {
             return Color(some).lighten(factor)
         }
 
-        const background = this.config.store?.appearance.vibrancy ? 'rgba(255, 255, 255,.4)' : theme.background
+        let background = Color(theme.background)
-        const backgroundMore = this.config.store?.appearance.vibrancy ? 'rgba(255, 255, 255,.5)' : more(theme.background, 0.25).string()
+        if (this.config.store?.appearance.vibrancy) {
+            background = background.fade(0.6)
+        }
+        // const background = theme.background
+        const backgroundMore = more(background.string(), 0.25).string()
+        // const backgroundMore =more(theme.background, 0.25).string()
         const accentIndex = 4
         const vars: Record<string, string> = {}
 
-        vars['--bs-body-bg'] = background
+        vars['--bs-body-bg'] = background.string()
         vars['--bs-body-color'] = theme.foreground
         vars['--bs-black'] = theme.colors[0]
         vars['--bs-red'] = theme.colors[1]
@@ -118,7 +132,7 @@ export class ThemesService {
     }
 
     findCurrentTheme (): Theme {
-        return this.findTheme(this.config.store.appearance.theme) ?? this.findTheme('Standard')!
+        return this.findTheme(this.config.store.appearance.theme) ?? this.standardTheme
     }
 
     applyTheme (theme: Theme): void {

tabby-core/src/theme.new.scss

@@ -4,6 +4,10 @@ $font-size-base: 14rem / 16;
 app-root {
     background: transparent;
 
+    &.vibrant {
+        background: rgba(var(--bs-dark-rgb),.65);
+    }
+
     &> .content {
         .tab-bar {
             background: var(--theme-bg-more);
@@ -167,6 +171,9 @@ $modal-footer-border-color:      transparent;
 // $headings-font-weight: lighter;
 // $headings-color: $base0;
 
+$form-check-input-width: 1.4em;
+$form-switch-width: 2.5em;
+
 @import '~bootstrap/scss/bootstrap.scss';
 @import "./theme.vendor.scss";
 
@@ -530,6 +537,13 @@ ngx-colors-panel .opened {
 
 .form-switch .form-check-input {
     --bs-form-switch-bg: inherit;
+    border-color: var(--theme-bg-more);
+    background-color: var(--theme-bg-more-2);
+
+    &:checked {
+        border-color: var(--theme-primary-more);
+        background-color: var(--theme-primary);
+    }
 }
 
 .form-control:focus {
@@ -541,3 +555,7 @@ ngx-colors-panel .opened {
     --bs-accordion-active-color: var(--theme-fg);
     --bs-accordion-active-bg: var(--theme-bg-more-2);
 }
+
+start-page {
+    background: var(--theme-bg);
+}

tabby-core/src/theme.ts

@@ -31,17 +31,18 @@ export class StandardCompactTheme extends Theme {
 /** @hidden */
 @Injectable()
 export class PaperTheme extends Theme {
-    name = 'Paper'
+    name = 'Paper (legacy)'
     css = require('./theme.paper.scss')
     terminalBackground = '#f7f1e0'
 }
 
 /** @hidden */
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class NewTheme extends Theme {
-    name = this.translate.instant('Standard')
+    name = this.translate.instant('Follow the color scheme')
     css = require('./theme.new.scss')
     terminalBackground = '#f7f1e0'
+    followsColorScheme = true
 
     constructor (private translate: TranslateService) {
         super()

tabby-settings/package.json

@@ -17,8 +17,8 @@
   "author": "Eugene Pankov",
   "license": "MIT",
   "devDependencies": {
-    "@types/marked": "^4.0.2",
+    "@types/marked": "^4.0.8",
-    "marked": "^4.0.8",
+    "marked": "^4.2.12",
     "ngx-infinite-scroll": "^15"
   },
   "peerDependencies": {

tabby-settings/src/components/releaseNotesTab.component.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import { marker as _ } from '@biesbjerg/ngx-translate-extract-marker'
 import axios from 'axios'
-import { marked } from 'marked'
+import * as marked from '../../node_modules/marked/src/marked'
 import { Component, Injector } from '@angular/core'
 import { BaseTabComponent, TranslateService } from 'tabby-core'
 
@@ -36,7 +36,7 @@ export class ReleaseNotesComponent extends BaseTabComponent {
         this.releases = this.releases.concat(response.data.map(r => ({
             name: r.name,
             version: r.tag_name,
-            content: marked(r.body),
+            content: marked.marked(r.body),
             date: new Date(r.created_at),
         })))
         this.lastPage = page

tabby-settings/src/components/settingsTabBody.component.ts

@@ -5,6 +5,7 @@ import { SettingsTabProvider } from '../api'
 @Component({
     selector: 'settings-tab-body',
     template: '<ng-template #placeholder></ng-template>',
+    styles: [`:host { display: block; padding-bottom: 20px; }`],
 })
 export class SettingsTabBodyComponent {
     @Input() provider: SettingsTabProvider

tabby-settings/yarn.lock

@@ -2,15 +2,15 @@
 # yarn lockfile v1
 
 
-"@types/marked@^4.0.2":
+"@types/marked@^4.0.8":
-  version "4.0.2"
+  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/@types/marked/-/marked-4.0.2.tgz#cb2dbf10da2f41cf20bd91fb5f89b67540c282f7"
+  resolved "https://registry.yarnpkg.com/@types/marked/-/marked-4.0.8.tgz#b316887ab3499d0a8f4c70b7bd8508f92d477955"
-  integrity sha512-auNrZ/c0w6wsM9DccwVxWHssrMDezHUAXNesdp2RQrCVCyrQbOiSq7yqdJKrUQQpw9VTm7CGYJH2A/YG7jjrjQ==
+  integrity sha512-HVNzMT5QlWCOdeuBsgXP8EZzKUf0+AXzN+sLmjvaB3ZlLqO+e4u0uXrdw9ub69wBKFs+c6/pA4r9sy6cCDvImw==
 
-marked@^4.0.8:
+marked@^4.2.12:
-  version "4.0.12"
+  version "4.2.12"
-  resolved "https://registry.yarnpkg.com/marked/-/marked-4.0.12.tgz#2262a4e6fd1afd2f13557726238b69a48b982f7d"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-4.2.12.tgz#d69a64e21d71b06250da995dcd065c11083bebb5"
-  integrity sha512-hgibXWrEDNBWgGiK18j/4lkS6ihTe9sxtV4Q1OQppb/0zzyPSzoFANBa5MfsG/zgsWklmNnhm0XACZOH/0HBiQ==
+  integrity sha512-yr8hSKa3Fv4D3jdZmtMMPghgVt6TWbk86WQaWhDloQjRSQhMMYCAro7jP7VDJrjjdV8pxVxMssXS8B8Y5DZ5aw==
 
 ngx-infinite-scroll@^15:
   version "15.0.0"

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

@@ -3,7 +3,7 @@ import { Spinner } from 'cli-spinner'
 import colors from 'ansi-colors'
 import { NgZone, OnInit, OnDestroy, Injector, ViewChild, HostBinding, Input, ElementRef, InjectFlags, Component } from '@angular/core'
 import { trigger, transition, style, animate, AnimationTriggerMetadata } from '@angular/animations'
-import { AppService, ConfigService, BaseTabComponent, HostAppService, HotkeysService, NotificationsService, Platform, LogService, Logger, TabContextMenuItemProvider, SplitTabComponent, SubscriptionContainer, MenuItemOptions, PlatformService, HostWindowService, ResettableTimeout, TranslateService } from 'tabby-core'
+import { AppService, ConfigService, BaseTabComponent, HostAppService, HotkeysService, NotificationsService, Platform, LogService, Logger, TabContextMenuItemProvider, SplitTabComponent, SubscriptionContainer, MenuItemOptions, PlatformService, HostWindowService, ResettableTimeout, TranslateService, ThemesService } from 'tabby-core'
 
 import { BaseSession } from '../session'
 
@@ -122,6 +122,7 @@ export class BaseTerminalTabComponent<P extends BaseTerminalProfile> extends Bas
     protected hostWindow: HostWindowService
     protected translate: TranslateService
     protected multifocus: MultifocusService
+    protected themes: ThemesService
     // Deps end
 
     protected logger: Logger
@@ -513,7 +514,7 @@ export class BaseTerminalTabComponent<P extends BaseTerminalProfile> extends Bas
     configure (): void {
         this.frontend?.configure(this.profile)
 
-        if (this.config.store.terminal.background === 'colorScheme') {
+        if (!this.themes.findCurrentTheme().followsColorScheme && this.config.store.terminal.background === 'colorScheme') {
             const scheme = this.profile.terminalColorScheme ?? this.config.store.terminal.colorScheme
             if (scheme.background) {
                 this.backgroundColor = scheme.background

tabby-terminal/src/components/appearanceSettingsTab.component.pug

@@ -55,7 +55,7 @@ h3.mb-3(translate) Appearance
         color-scheme-preview([scheme]='config.store.terminal.colorScheme', [fontPreview]='true')
 
 .content-box
-    .form-line
+    .form-line(*ngIf='!themes.findCurrentTheme().followsColorScheme')
         .header
             .title(translate) Terminal background
 

tabby-terminal/src/components/appearanceSettingsTab.component.ts

@@ -3,7 +3,7 @@ import { Observable, debounceTime, distinctUntilChanged, map } from 'rxjs'
 import { debounce } from 'utils-decorators/dist/esm/debounce/debounce'
 
 import { Component } from '@angular/core'
-import { ConfigService, getCSSFontFamily, PlatformService } from 'tabby-core'
+import { ConfigService, getCSSFontFamily, PlatformService, ThemesService } from 'tabby-core'
 
 /** @hidden */
 @Component({
@@ -15,6 +15,7 @@ export class AppearanceSettingsTabComponent {
 
     constructor (
         public config: ConfigService,
+        public themes: ThemesService,
         private platform: PlatformService,
     ) { }
 

tabby-terminal/src/frontends/xtermFrontend.ts

@@ -1,6 +1,6 @@
 import { BehaviorSubject, filter, firstValueFrom, takeUntil } from 'rxjs'
 import { Injector } from '@angular/core'
-import { ConfigService, getCSSFontFamily, HostAppService, HotkeysService, Platform, PlatformService } from 'tabby-core'
+import { ConfigService, getCSSFontFamily, HostAppService, HotkeysService, Platform, PlatformService, ThemesService } from 'tabby-core'
 import { Frontend, SearchOptions, SearchState } from './frontend'
 import { Terminal, ITheme } from 'xterm'
 import { FitAddon } from 'xterm-addon-fit'
@@ -87,6 +87,7 @@ export class XTermFrontend extends Frontend {
     private hotkeysService: HotkeysService
     private platformService: PlatformService
     private hostApp: HostAppService
+    private themes: ThemesService
 
     constructor (injector: Injector) {
         super(injector)
@@ -94,6 +95,7 @@ export class XTermFrontend extends Frontend {
         this.hotkeysService = injector.get(HotkeysService)
         this.platformService = injector.get(PlatformService)
         this.hostApp = injector.get(HostAppService)
+        this.themes = injector.get(ThemesService)
 
         this.xterm = new Terminal({
             allowTransparency: true,
@@ -363,7 +365,7 @@ export class XTermFrontend extends Frontend {
             foreground: scheme!.foreground,
             selectionBackground: scheme!.selection ?? '#88888888',
             selectionForeground: scheme!.selectionForeground ?? undefined,
-            background: config.terminal.background === 'colorScheme' ? scheme!.background : '#00000000',
+            background: (!this.themes.findCurrentTheme().followsColorScheme && config.terminal.background === 'colorScheme') ? scheme!.background : '#00000000',
             cursor: scheme!.cursor,
             cursorAccent: scheme!.cursorAccent,
         }