.

app/src/terminal/components/colorPicker.pug

@@ -0,0 +1,14 @@
+template(#content)
+    .preview(
+        [style.width]='"100%"',
+        [style.background]='model',
+    )
+    input.form-control(type='text', '[(ngModel)]'='model', (ngModelChange)='onChange()', #input)
+
+div(
+    [ngbPopover]='content',
+    [style.background]='model',
+    (click)='open()',
+    container='body',
+    #popover='ngbPopover',
+) {{ title }}

app/src/terminal/components/colorPicker.scss

@@ -0,0 +1,15 @@
+div {
+    width: 32px;
+    height: 32px;
+    box-shadow: 0 1px 1px rgba(0,0,0,.5);
+    border: none;
+    margin: 5px 10px 5px 0;
+    border-radius: 2px;
+    text-align: center;
+    font-weight: bold;
+    font-size: 17px;
+    display: inline-block;
+    color: #fff;
+    line-height: 31px;
+    text-shadow: 0 1px 1px rgba(0,0,0,.5);
+}

app/src/terminal/components/colorPicker.ts

@@ -0,0 +1,40 @@
+import { Component, Input, Output, EventEmitter, HostListener, ViewChild } from '@angular/core'
+import { NgbPopover } from '@ng-bootstrap/ng-bootstrap'
+
+
+@Component({
+    selector: 'color-picker',
+    template: require('./colorPicker.pug'),
+    styles: [require('./colorPicker.scss')],
+})
+export class ColorPickerComponent {
+    @Input() model: string
+    @Input() title: string
+    @Output() modelChange = new EventEmitter<string>()
+    @ViewChild('popover') popover: NgbPopover
+    @ViewChild('input') input
+
+    open () {
+        setImmediate(() => {
+            this.popover.open()
+            setImmediate(() => {
+                this.input.nativeElement.focus()
+            })
+        })
+    }
+
+    @HostListener('document:click', ['$event']) onOutsideClick ($event) {
+        let windowRef = (<any>this.popover)._windowRef
+        if (!windowRef) {
+            return
+        }
+        if ($event.target !== windowRef.location.nativeElement &&
+            !windowRef.location.nativeElement.contains($event.target)) {
+            this.popover.close()
+        }
+    }
+
+    onChange () {
+        this.modelChange.emit(this.model)
+    }
+}

app/src/terminal/components/settings.pug

@@ -72,9 +72,28 @@
                 (ngModelChange)='config.save()',
             )
                 option(*ngFor='let scheme of colorSchemes', [ngValue]='scheme') {{scheme.name}}
+                
+            div(*ngIf='config.store.terminal.colorScheme.colors')
+                color-picker(
+                    '[(model)]'='config.store.terminal.colorScheme.foreground',
+                    (modelChange)='config.save()',
+                    title='FG',
+                )
+                color-picker(
+                    '[(model)]'='config.store.terminal.colorScheme.background',
+                    (modelChange)='config.save()',
+                    title='BG',
+                )
+                color-picker(
+                    *ngFor='let _ of config.store.terminal.colorScheme.colors; let idx = index',
+                    '[(model)]'='config.store.terminal.colorScheme.colors[idx]',
+                    (modelChange)='config.save()',
+                    [title]='idx',
+                )
 
         .form-group
             label Terminal background
+            br
             div(
                 '[(ngModel)]'='config.store.terminal.background',
                 (ngModelChange)='config.save()',

app/src/terminal/index.ts

@@ -9,6 +9,7 @@ import { SettingsTabProvider } from '../settings/api'
 
 import { TerminalTabComponent } from './components/terminalTab'
 import { SettingsComponent } from './components/settings'
+import { ColorPickerComponent } from './components/colorPicker'
 import { SessionsService } from './services/sessions'
 import { ScreenPersistenceProvider } from './persistenceProviders'
 import { ButtonProvider } from './buttonProvider'
@@ -34,13 +35,14 @@ import { hterm } from './hterm'
         // { provide: SessionPersistenceProvider, useValue: null },
         { provide: SettingsTabProvider, useClass: TerminalSettingsProvider, multi: true },
         { provide: ConfigProvider, useClass: TerminalConfigProvider, multi: true },
-        { provide: TerminalColorSchemeProvider, useClass: HyperColorSchemes, multi: true }
+        { provide: TerminalColorSchemeProvider, useClass: HyperColorSchemes, multi: true },
     ],
     entryComponents: [
         TerminalTabComponent,
         SettingsComponent,
     ],
     declarations: [
+        ColorPickerComponent,
         TerminalTabComponent,
         SettingsComponent,
     ],

app/src/theme.scss

@@ -52,6 +52,8 @@ $modal-content-border-color:     $body-bg2;
 $modal-header-border-color:      $body-bg2;
 $modal-footer-border-color:      $body-bg2;
 
+$popover-bg:                     $body-bg2;
+
 
 @import '~bootstrap/scss/bootstrap.scss';