fixed #8878 - default back to dark mode

Eugeny · Aug 29, 2023 · 0becf8c · 0becf8c
1 parent 6042a52
commit 0becf8c
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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