.

terminus-settings/src/components/settingsTab.pug

@@ -1,17 +1,20 @@
 button.btn.btn-outline-warning.btn-block(*ngIf='config.restartRequested', '(click)'='restartApp()') Restart the app to apply changes
 
 ngb-tabset.vertical(type='tabs')
-    ngb-tab(*ngFor='let provider of settingsProviders')
-        template(ngbTabTitle)
-            | {{provider.title}}
-        template(ngbTabContent)
-            settings-tab-body([provider]='provider')
     ngb-tab
         template(ngbTabTitle)
             | Application
         template(ngbTabContent)
             .row
                 .col.col-lg-6
+                    .form-group
+                        label Theme
+                            select.form-control(
+                                '[(ngModel)]'='config.store.appearance.theme',
+                                (ngModelChange)='config.save()',
+                            )
+                                option(*ngFor='let theme of themes', [ngValue]='theme.name') {{theme.name}}
+
                     .form-group
                         label Show tabs
                         br
@@ -144,3 +147,8 @@ ngb-tabset.vertical(type='tabs')
                         td
                             multi-hotkey-input('[(model)]'='config.store.hotkeys[hotkey.id]')
                     
+    ngb-tab(*ngFor='let provider of settingsProviders')
+        template(ngbTabTitle)
+            | {{provider.title}}
+        template(ngbTabContent)
+            settings-tab-body([provider]='provider')

terminus-settings/src/components/settingsTab.ts

@@ -1,5 +1,5 @@
 import { Component, Inject } from '@angular/core'
-import { ElectronService, DockingService, ConfigService, IHotkeyDescription, HotkeyProvider, BaseTabComponent } from 'terminus-core'
+import { ElectronService, DockingService, ConfigService, IHotkeyDescription, HotkeyProvider, BaseTabComponent, Theme } from 'terminus-core'
 
 import { SettingsTabProvider } from '../api'
 
@@ -21,7 +21,8 @@ export class SettingsTabComponent extends BaseTabComponent {
         private electron: ElectronService,
         public docking: DockingService,
         @Inject(HotkeyProvider) hotkeyProviders: HotkeyProvider[],
-        @Inject(SettingsTabProvider) public settingsProviders: SettingsTabProvider[]
+        @Inject(SettingsTabProvider) public settingsProviders: SettingsTabProvider[],
+        @Inject(Theme) public themes: Theme[],
     ) {
         super()
         this.hotkeyDescriptions = hotkeyProviders.map(x => x.hotkeys).reduce((a, b) => a.concat(b))