diff --git a/tabby-core/src/api/theme.ts b/tabby-core/src/api/theme.ts index 621ad4a7..bae63c16 100644 --- a/tabby-core/src/api/theme.ts +++ b/tabby-core/src/api/theme.ts @@ -13,4 +13,5 @@ export abstract class Theme { macOSWindowButtonsInsetX?: number macOSWindowButtonsInsetY?: number + followsColorScheme?: boolean } diff --git a/tabby-core/src/components/startPage.component.pug b/tabby-core/src/components/startPage.component.pug index b7fe91f1..76089062 100644 --- a/tabby-core/src/components/startPage.component.pug +++ b/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 diff --git a/tabby-core/src/components/toggle.component.scss b/tabby-core/src/components/toggle.component.scss index bc1ed495..033449ec 100644 --- a/tabby-core/src/components/toggle.component.scss +++ b/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; + } } diff --git a/tabby-core/src/services/themes.service.ts b/tabby-core/src/services/themes.service.ts index 0ed81fc5..6a1071d5 100644 --- a/tabby-core/src/services/themes.service.ts +++ b/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() 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 - const backgroundMore = this.config.store?.appearance.vibrancy ? 'rgba(255, 255, 255,.5)' : more(theme.background, 0.25).string() + let background = Color(theme.background) + 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 = {} - 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 { diff --git a/tabby-core/src/theme.new.scss b/tabby-core/src/theme.new.scss index 21285ed8..251f2656 100644 --- a/tabby-core/src/theme.new.scss +++ b/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); +} diff --git a/tabby-core/src/theme.ts b/tabby-core/src/theme.ts index 6966d98e..b3328915 100644 --- a/tabby-core/src/theme.ts +++ b/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() diff --git a/tabby-settings/package.json b/tabby-settings/package.json index 91be3ff2..1b347281 100644 --- a/tabby-settings/package.json +++ b/tabby-settings/package.json @@ -17,8 +17,8 @@ "author": "Eugene Pankov", "license": "MIT", "devDependencies": { - "@types/marked": "^4.0.2", - "marked": "^4.0.8", + "@types/marked": "^4.0.8", + "marked": "^4.2.12", "ngx-infinite-scroll": "^15" }, "peerDependencies": { diff --git a/tabby-settings/src/components/releaseNotesTab.component.ts b/tabby-settings/src/components/releaseNotesTab.component.ts index 375946e4..62740476 100644 --- a/tabby-settings/src/components/releaseNotesTab.component.ts +++ b/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 diff --git a/tabby-settings/src/components/settingsTabBody.component.ts b/tabby-settings/src/components/settingsTabBody.component.ts index 57142441..9587cb4e 100644 --- a/tabby-settings/src/components/settingsTabBody.component.ts +++ b/tabby-settings/src/components/settingsTabBody.component.ts @@ -5,6 +5,7 @@ import { SettingsTabProvider } from '../api' @Component({ selector: 'settings-tab-body', template: '', + styles: [`:host { display: block; padding-bottom: 20px; }`], }) export class SettingsTabBodyComponent { @Input() provider: SettingsTabProvider diff --git a/tabby-settings/yarn.lock b/tabby-settings/yarn.lock index 21c575c8..0c460706 100644 --- a/tabby-settings/yarn.lock +++ b/tabby-settings/yarn.lock @@ -2,15 +2,15 @@ # yarn lockfile v1 -"@types/marked@^4.0.2": - version "4.0.2" - resolved "https://registry.yarnpkg.com/@types/marked/-/marked-4.0.2.tgz#cb2dbf10da2f41cf20bd91fb5f89b67540c282f7" - integrity sha512-auNrZ/c0w6wsM9DccwVxWHssrMDezHUAXNesdp2RQrCVCyrQbOiSq7yqdJKrUQQpw9VTm7CGYJH2A/YG7jjrjQ== +"@types/marked@^4.0.8": + version "4.0.8" + resolved "https://registry.yarnpkg.com/@types/marked/-/marked-4.0.8.tgz#b316887ab3499d0a8f4c70b7bd8508f92d477955" + integrity sha512-HVNzMT5QlWCOdeuBsgXP8EZzKUf0+AXzN+sLmjvaB3ZlLqO+e4u0uXrdw9ub69wBKFs+c6/pA4r9sy6cCDvImw== -marked@^4.0.8: - version "4.0.12" - resolved "https://registry.yarnpkg.com/marked/-/marked-4.0.12.tgz#2262a4e6fd1afd2f13557726238b69a48b982f7d" - integrity sha512-hgibXWrEDNBWgGiK18j/4lkS6ihTe9sxtV4Q1OQppb/0zzyPSzoFANBa5MfsG/zgsWklmNnhm0XACZOH/0HBiQ== +marked@^4.2.12: + version "4.2.12" + resolved "https://registry.yarnpkg.com/marked/-/marked-4.2.12.tgz#d69a64e21d71b06250da995dcd065c11083bebb5" + integrity sha512-yr8hSKa3Fv4D3jdZmtMMPghgVt6TWbk86WQaWhDloQjRSQhMMYCAro7jP7VDJrjjdV8pxVxMssXS8B8Y5DZ5aw== ngx-infinite-scroll@^15: version "15.0.0" diff --git a/tabby-terminal/src/api/baseTerminalTab.component.ts b/tabby-terminal/src/api/baseTerminalTab.component.ts index a00334f6..6bacbf73 100644 --- a/tabby-terminal/src/api/baseTerminalTab.component.ts +++ b/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

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

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 diff --git a/tabby-terminal/src/components/appearanceSettingsTab.component.pug b/tabby-terminal/src/components/appearanceSettingsTab.component.pug index 4afee20a..444da50b 100644 --- a/tabby-terminal/src/components/appearanceSettingsTab.component.pug +++ b/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 diff --git a/tabby-terminal/src/components/appearanceSettingsTab.component.ts b/tabby-terminal/src/components/appearanceSettingsTab.component.ts index 6197a641..96b5b396 100644 --- a/tabby-terminal/src/components/appearanceSettingsTab.component.ts +++ b/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, ) { } diff --git a/tabby-terminal/src/frontends/xtermFrontend.ts b/tabby-terminal/src/frontends/xtermFrontend.ts index 01e5d8cd..54fd6e87 100644 --- a/tabby-terminal/src/frontends/xtermFrontend.ts +++ b/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, }