diff --git a/tabby-core/src/components/welcomeTab.component.pug b/tabby-core/src/components/welcomeTab.component.pug index 3b79680da5..11543e1616 100644 --- a/tabby-core/src/components/welcomeTab.component.pug +++ b/tabby-core/src/components/welcomeTab.component.pug @@ -1,10 +1,10 @@ -.container.mt-5.mb-5 - .mb-4 +.container.mt-3.mb-3 + .mb-3 .tabby-logo h1.tabby-title Tabby sup α - .text-center.mb-5(translate) Thank you for downloading Tabby! + .text-center.mb-3(translate) Thank you for downloading Tabby! .form-line .header @@ -16,13 +16,54 @@ *ngFor='let lang of allLanguages' ) {{lang.name}} + .form-line + .header + .title(translate) Switch color scheme + + .btn-group(role='group') + input.btn-check( + type='radio', + name='colorSchemeMode', + [(ngModel)]='config.store.appearance.colorSchemeMode', + (ngModelChange)='config.save()', + id='colorSchemeModeAuto', + [value]='"auto"' + ) + label.btn.btn-secondary( + for='colorSchemeModeAuto' + ) + span(translate) From system + input.btn-check( + type='radio', + name='colorSchemeMode', + [(ngModel)]='config.store.appearance.colorSchemeMode', + (ngModelChange)='config.save()', + id='colorSchemeModeDark', + [value]='"dark"' + ) + label.btn.btn-secondary( + for='colorSchemeModeDark' + ) + span(translate) Always dark + input.btn-check( + type='radio', + name='colorSchemeMode', + [(ngModel)]='config.store.appearance.colorSchemeMode', + (ngModelChange)='config.save()', + id='colorSchemeModeLight', + [value]='"light"' + ) + label.btn.btn-secondary( + for='colorSchemeModeLight' + ) + span(translate) Always light + .form-line .header .title(translate) Enable analytics .description(translate) Help track the number of Tabby installs across the world! toggle([(ngModel)]='config.store.enableAnalytics') - .form-line .header .title(translate) Enable global hotkey (Ctrl-Space) diff --git a/tabby-core/src/components/welcomeTab.component.scss b/tabby-core/src/components/welcomeTab.component.scss index 97fd64313b..f3ebc02374 100644 --- a/tabby-core/src/components/welcomeTab.component.scss +++ b/tabby-core/src/components/welcomeTab.component.scss @@ -6,3 +6,8 @@ max-height: 100%; overflow-y: auto; } + +.tabby-logo { + width: 60px; + height: 60px; +} diff --git a/tabby-core/src/configDefaults.macos.yaml b/tabby-core/src/configDefaults.macos.yaml index 6f22f2ac5e..86176476dd 100644 --- a/tabby-core/src/configDefaults.macos.yaml +++ b/tabby-core/src/configDefaults.macos.yaml @@ -96,5 +96,3 @@ hotkeys: - '⌘-Shift-E' command-selector: - '⌘-Shift-P' -appearance: - vibrancy: true diff --git a/tabby-core/src/configDefaults.yaml b/tabby-core/src/configDefaults.yaml index 1ad4f4211c..6c1fc36ad6 100644 --- a/tabby-core/src/configDefaults.yaml +++ b/tabby-core/src/configDefaults.yaml @@ -19,6 +19,7 @@ appearance: vibrancyType: 'blur' lastTabClosesWindow: false spaciness: 1 + colorSchemeMode: 'dark' terminal: showBuiltinProfiles: true showRecentProfiles: 3 diff --git a/tabby-core/src/services/themes.service.ts b/tabby-core/src/services/themes.service.ts index 01a6a2bd44..e9e2274362 100644 --- a/tabby-core/src/services/themes.service.ts +++ b/tabby-core/src/services/themes.service.ts @@ -3,7 +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 { PlatformService, PlatformTheme } from '../api/platform' import { NewTheme } from '../theme' @Injectable({ providedIn: 'root' }) @@ -194,7 +194,14 @@ export class ThemesService { /// @hidden _getActiveColorScheme (): any { - if (this.platform.getTheme() === 'light') { + let theme: PlatformTheme = 'dark' + if (this.config.store.appearance.colorSchemeMode === 'light') { + theme = 'light' + } else if (this.config.store.appearance.colorSchemeMode === 'auto') { + theme = this.platform.getTheme() + } + + if (theme === 'light') { return this.config.store.terminal.lightColorScheme } else { return this.config.store.terminal.colorScheme diff --git a/tabby-terminal/src/components/colorSchemeSettingsTab.component.pug b/tabby-terminal/src/components/colorSchemeSettingsTab.component.pug index dfc2294f8f..1f9ffbf4f6 100644 --- a/tabby-terminal/src/components/colorSchemeSettingsTab.component.pug +++ b/tabby-terminal/src/components/colorSchemeSettingsTab.component.pug @@ -1,5 +1,47 @@ h3.mb-3(translate) Color schemes +.form-line + .header + .title(translate) Switch color scheme + + .btn-group(role='group') + input.btn-check( + type='radio', + name='colorSchemeMode', + [(ngModel)]='config.store.appearance.colorSchemeMode', + (ngModelChange)='config.save()', + id='colorSchemeModeAuto', + [value]='"auto"' + ) + label.btn.btn-secondary( + for='colorSchemeModeAuto' + ) + span(translate) From system + input.btn-check( + type='radio', + name='colorSchemeMode', + [(ngModel)]='config.store.appearance.colorSchemeMode', + (ngModelChange)='config.save()', + id='colorSchemeModeDark', + [value]='"dark"' + ) + label.btn.btn-secondary( + for='colorSchemeModeDark' + ) + span(translate) Always dark + input.btn-check( + type='radio', + name='colorSchemeMode', + [(ngModel)]='config.store.appearance.colorSchemeMode', + (ngModelChange)='config.save()', + id='colorSchemeModeLight', + [value]='"light"' + ) + label.btn.btn-secondary( + for='colorSchemeModeLight' + ) + span(translate) Always light + ul.nav-tabs(ngbNav, #nav='ngbNav', [activeId]='defaultTab') li(ngbNavItem='dark') a(ngbNavLink, translate) Dark mode