fixed #8886 - crash on the color schemes settings tab

package.json

@@ -52,7 +52,7 @@
     "graceful-fs": "^4.2.10",
     "html-loader": "4.2.0",
     "json-loader": "^0.5.7",
-    "lru-cache": "^10.0.1",
+    "lru-cache": "^6.0.0",
     "macos-release": "^3.1.0",
     "ngx-toastr": "^16.0.2",
     "node-abi": "^3.45.0",

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

@@ -1,10 +1,10 @@
-.container.mt-5.mb-5
+.container.mt-3.mb-3
-    .mb-4
+    .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)

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

@@ -6,3 +6,8 @@
     max-height: 100%;
     overflow-y: auto;
 }
+
+.tabby-logo {
+    width: 60px;
+    height: 60px;
+}

tabby-core/src/configDefaults.macos.yaml

@@ -96,5 +96,3 @@ hotkeys:
     - '⌘-Shift-E'
   command-selector:
     - '⌘-Shift-P'
-appearance:
-  vibrancy: true

tabby-core/src/configDefaults.yaml

@@ -19,6 +19,7 @@ appearance:
   vibrancyType: 'blur'
   lastTabClosesWindow: false
   spaciness: 1
+  colorSchemeMode: 'dark'
 terminal:
   showBuiltinProfiles: true
   showRecentProfiles: 3

tabby-core/src/services/config.service.ts

@@ -398,7 +398,9 @@ export class ConfigService {
             config.version = 5
         }
         if (config.version < 6) {
-            if (config.ssh.clearServiceMessagesOnConnect === false) {
+            if (config.ssh?.clearServiceMessagesOnConnect === false) {
+                config.profileDefaults ??= {}
+                config.profileDefaults.ssh ??= {}
                 config.profileDefaults.ssh.clearServiceMessagesOnConnect = false
                 delete config.ssh?.clearServiceMessagesOnConnect
             }

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

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

@@ -1,5 +1,47 @@
 h3.mb-3(translate) Color schemes
 
+.form-line.mb-4
+    .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

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

@@ -1,5 +1,5 @@
 import { Component } from '@angular/core'
-import { PlatformService } from 'tabby-core'
+import { ConfigService, PlatformService } from 'tabby-core'
 
 /** @hidden */
 @Component({
@@ -10,6 +10,7 @@ export class ColorSchemeSettingsTabComponent {
 
     constructor (
         platform: PlatformService,
+        public config: ConfigService,
     ) {
         this.defaultTab = platform.getTheme()
     }

yarn.lock

@@ -5573,12 +5573,15 @@ lowercase-keys@^2.0.0:
   resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-2.0.0.tgz#2603e78b7b4b0006cbca2fbcc8a3202558ac9479"
   integrity sha512-tqNXrS78oMOE73NMxK4EMLQsQowWf8jKooH9g7xPavRT706R6bkQJ6DY2Te7QukaZsulxa30wQ7bk0pm4XiHmA==
 
-lru-cache@^10.0.1:
+lru-cache@^4.0.0, lru-cache@^4.1.1, lru-cache@~4.1.1:
-  version "10.0.1"
+  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-10.0.1.tgz#0a3be479df549cca0e5d693ac402ff19537a6b7a"
+  resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.1.tgz"
-  integrity sha512-IJ4uwUTi2qCccrioU6g9g/5rvvVl13bsdczUUcqbciD9iLr095yj8DQKdObriEvuNSx325N1rV1O0sJFszx75g==
+  integrity sha512-q4spe4KTfsAS1SUHLO0wz8Qiyf1+vMIAgpRYioFYDMNqKfHQbg+AVDH3i4fvpl71/P1L0dBl+fQi+P37UYf0ew==
+  dependencies:
+    pseudomap "^1.0.2"
+    yallist "^2.1.2"
 
-lru-cache@^4.0.0, lru-cache@^4.0.1, lru-cache@^4.1.1, lru-cache@~4.1.1:
+lru-cache@^4.0.1:
   version "4.1.5"
   resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz"
   integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==