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