.

terminus-core/@angular/animations.ts

-export * from '@angular/animations'

terminus-core/@angular/common.ts

-export * from '@angular/common'

terminus-core/@angular/compiler.ts

-export * from '@angular/compiler'

terminus-core/@angular/core.ts

-export * from '@angular/core'

terminus-core/@angular/forms.ts

-export * from '@angular/forms'

terminus-core/@angular/platform-browser-dynamic.ts

-export * from '@angular/platform-browser-dynamic'

terminus-core/@angular/platform-browser.ts

-export * from '@angular/platform-browser'

terminus-core/@ng-bootstrap/ng-bootstrap.ts

-export * from '@ng-bootstrap/ng-bootstrap'

terminus-core/src/api/index.ts

@@ -4,6 +4,7 @@ export { ToolbarButtonProvider, IToolbarButton } from './toolbarButtonProvider'
 export { ConfigProvider } from './configProvider'
 export { HotkeyProvider, IHotkeyDescription } from './hotkeyProvider'
 export { DefaultTabProvider } from './defaultTabProvider'
+export { Theme } from './theme'
 
 export { AppService } from '../services/app'
 export { ConfigService } from '../services/config'

terminus-core/src/api/theme.ts

+export abstract class Theme {
+    name: string
+    css: string
+    terminalBackground: string
+}

terminus-core/src/components/appRoot.ts

@@ -10,13 +10,10 @@ import { QuitterService } from '../services/quitter'
 import { ConfigService } from '../services/config'
 import { DockingService } from '../services/docking'
 import { TabRecoveryService } from '../services/tabRecovery'
+import { ThemesService } from '../services/themes'
 
 import { AppService, IToolbarButton, ToolbarButtonProvider } from '../api'
 
-import 'angular2-toaster/toaster.css'
-import 'overrides.scss'
-import 'theme.scss'
-
 
 @Component({
     selector: 'app-root',
@@ -55,6 +52,7 @@ export class AppRootComponent {
         public app: AppService,
         @Inject(ToolbarButtonProvider) private toolbarButtonProviders: ToolbarButtonProvider[],
         log: LogService,
+        _themes: ThemesService,
         _quitter: QuitterService,
     ) {
         (<any>console).timeStamp('AppComponent ctor')

terminus-core/src/components/tabHeader.scss

-@import '~variables.scss';
+$tabs-height: 40px;
 
 :host {
     line-height: $tabs-height - 2px;

terminus-core/src/components/titleBar.scss

-@import '~variables.scss';
-
 $titlebar-height: 30px;
 
 :host {

terminus-core/src/defaultConfigValues.yaml

@@ -3,6 +3,7 @@ appearance:
   dockScreen: 'current'
   dockFill: 50
   tabsOnTop: true
+  theme: 'Standard'
   useNativeFrame: false
 hotkeys:
   close-tab:

terminus-core/src/global.scss

-html.platform-win32 {
-    body.focused {
-        //border: 1px solid #9c9c00 !important;
-    }
-}
-
-body {
-    border: 1px solid #131313;
-    transition: 0.5s border;
-    overflow: hidden;
-    min-height: 100vh;
-    cursor: default;
-}
-
-.no-drag, a, button, checkbox, .form-control, #toast-container {
-    -webkit-app-region: no-drag;
-    outline: 0 !important;
-
-    * {
-        outline: 0 !important;
-        -webkit-app-region: no-drag;
-    }
-}
-
-.window-resizer {
-    -webkit-app-region: no-drag;
-    position: fixed;
-    width: 10px;
-    height: 10px;
-}
-
-.window-resizer-tl {
-    left: 0;
-    top: 0;
-}
-
-
-
-.no-wrap {
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-}
-
-.word-wrap {
-    word-wrap: break-word;
-    word-break: break-all;
-}
-
-
-#toast-container.toast-top-full-width {
-    width: 100%;
-    top: 50px;
-
-    > div {
-        width: 100%;
-        border-radius: 0;
-        box-shadow: 0 0 2px rgba(0,0,0,.75);
-        opacity: 1;
-        filter: none;
-    }
-}
-
-
-.btn {
-    i + * {
-        margin-left: 5px;
-    }
-}
-
-.list-group-item {
-    margin: none;
-
-    > .btn {
-        float: right;
-        margin: -7px -11px 0 0;
-        background: transparent;
-        box-shadow: none;
-
-        &:hover {
-            background: rgba(0,0,0,.25);
-        }
-    }
-}
-
-
-ngb-typeahead-window {
-    max-height: 200px;
-    overflow-y: auto;
-
-    >button {
-        display: block;
-        width: 100%;
-        -webkit-appearance: none;
-        //border-bottom: 1px solid @dark-border;
-    }
-}

terminus-core/src/index.ts

@@ -17,6 +17,7 @@ import { PluginsService } from './services/plugins'
 import { QuitterService } from './services/quitter'
 import { DockingService } from './services/docking'
 import { TabRecoveryService } from './services/tabRecovery'
+import { ThemesService } from './services/themes'
 
 import { AppRootComponent } from './components/appRoot'
 import { TabBodyComponent } from './components/tabBody'
@@ -24,6 +25,9 @@ import { TabHeaderComponent } from './components/tabHeader'
 import { TitleBarComponent } from './components/titleBar'
 
 import { HotkeyProvider } from './api/hotkeyProvider'
+import { Theme } from './api/theme'
+
+import { StandardTheme } from './theme'
 
 
 const PROVIDERS = [
@@ -37,8 +41,10 @@ const PROVIDERS = [
     NotifyService,
     PluginsService,
     TabRecoveryService,
+    ThemesService,
     QuitterService,
     { provide: HotkeyProvider, useClass: AppHotkeyProvider, multi: true },
+    { provide: Theme, useClass: StandardTheme, multi: true },
 ]
 
 
@@ -50,7 +56,6 @@ const PROVIDERS = [
         ToasterModule,
         NgbModule,
     ],
-    providers: PROVIDERS,
     declarations: [
         AppRootComponent,
         TabBodyComponent,

terminus-core/src/overrides.scss

-.form-group label {
-    margin-bottom: 2px;
-}

terminus-core/src/services/themes.ts

+import { Inject, Injectable } from '@angular/core'
+import { ConfigService } from '../services/config'
+import { Theme } from '../api/theme'
+
+
+@Injectable()
+export class ThemesService {
+    private styleElement: HTMLElement = null
+
+    constructor (
+        private config: ConfigService,
+        @Inject(Theme) private themes: Theme[],
+    ) {
+        this.applyCurrentTheme()
+        config.change.subscribe(() => {
+            this.applyCurrentTheme()
+        })
+    }
+
+    findTheme (name: string): Theme {
+        return this.themes.find(x => x.name === name)
+    }
+
+    applyTheme (theme: Theme): void {
+        if (!this.styleElement) {
+            this.styleElement = document.createElement('style')
+            this.styleElement.setAttribute('id', 'theme')
+            document.querySelector('head').appendChild(this.styleElement)
+        }
+        this.styleElement.textContent = theme.css
+    }
+
+    applyCurrentTheme (): void {
+        let theme = this.findTheme(this.config.full().appearance.theme)
+        if (!theme) {
+            theme = this.findTheme('Standard')
+        }
+        this.applyTheme(theme)
+    }
+}

terminus-core/src/theme.scss

+$tab-border-radius: 5px;
+$button-hover-bg: rgba(0, 0, 0, .25);
+$button-active-bg: rgba(0, 0, 0, .5);
+
+
 $white:  #fff !default;
 $black:  #000 !default;
 $red:    #d9534f !default;
@@ -73,10 +78,6 @@ ngb-tabset .tab-content {
     background: $blue;
 }
 
-$tab-border-radius: 5px;
-$button-hover-bg: rgba(0, 0, 0, .25);
-$button-active-bg: rgba(0, 0, 0, .5);
-
 title-bar {
     background: $body-bg2;
 
@@ -291,3 +292,7 @@ hotkey-input-modal {
         }
     }
 }
+
+.form-group label {
+    margin-bottom: 2px;
+}

terminus-core/src/theme.ts

+import { Injectable } from '@angular/core'
+import { Theme } from './api'
+
+
+@Injectable()
+export class StandardTheme extends Theme {
+    name = 'Standard'
+    css = require('./theme.scss')
+    terminalBackground = '#1D272D'
+}

terminus-core/src/variables.scss

-$tabs-height: 40px;

terminus-core/webpack.config.js

@@ -29,9 +29,7 @@ module.exports = {
         }
       },
       { test: /\.pug$/, use: ['apply-loader', 'pug-loader'] },
-      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'], exclude: /components\// },
-      { test: /\.scss$/, use: ['to-string-loader', 'css-loader', 'sass-loader'], include: /components\// },
-      { test: /\.css$/, use: ['to-string-loader', 'css-loader', 'sass-loader'] },
+      { test: /\.scss$/, use: ['to-string-loader', 'css-loader', 'sass-loader'] },
       { test: /\.yaml$/, use: ['json-loader', 'yaml-loader'] },
     ]
   },

terminus-settings/src/components/settingsTab.pug

 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

 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))