implement dark theme

ui/dist/themes/dark.css

@@ -0,0 +1,33 @@
+:root {
+    /* Colors */
+    --color-primary:  #009688;
+    --color-canvas: #0f1517;
+    --color-bg: #1a2327;
+    --color-bg-alt: #314048;
+    --color-help: #AAA;
+    --color-error: #a94442;
+    --color-load-screen-text: #FFF;
+    --color-money: var(--color-primary);
+    --color-meta-light: #757575;
+    --color-dark-overlay: rgb(15, 21, 23, 0.85);
+
+    /* Text */
+    --text-color: #FFF;
+
+    /* Input */
+    --input-bg: transparent;
+    --input-active-bg: rgba(0,0,0, 0.65);
+    --input-border-color: rgba(255,255,255, 0.25);
+
+    /* Search */
+    --search-bg: rgba(0,0,0, 0.45);
+    --search-active-bg: rgba(0,0,0, 0.75);
+    --search-border: 1px solid rgba(0,0,0, 0.5);
+
+    /* Select */
+    --select-bg: var(--color-bg-alt);
+
+    /* Header */
+    --header-color: #EEE;
+    --header-active-color: #FFF;
+}

ui/js/component/app/view.jsx

@@ -19,6 +19,10 @@ class App extends React.PureComponent {
       alertError(event.detail);
     });
 
+    getThemes();
+
+    setTheme();
+
     if (!this.props.upgradeSkipped) {
       checkUpgradeAvailable();
     }
@@ -32,12 +36,6 @@ class App extends React.PureComponent {
     this.scrollListener = () => this.props.recordScroll(window.scrollY);
 
     window.addEventListener("scroll", this.scrollListener);
-
-    // Load themes
-    getThemes();
-
-    // Select theme
-    setTheme();
   }
 
   componentWillUnmount() {

ui/scss/_gui.scss

@@ -7,6 +7,7 @@ html
 }
 body
 {
+  color: var(--text-color);
   font-family: 'Source Sans Pro', sans-serif;
   line-height: var(--font-line-height);
 }

ui/scss/_vars.scss

@@ -19,6 +19,7 @@
   --color-bg: #ffffff;
   --color-bg-alt: #D9D9D9;
 
+
   /* Misc */
   --content-max-width: 1000px;
   --nsfw-blur-intensity: 20px;
@@ -50,9 +51,14 @@
 
   /* Input */
   --input-width: 330px;
+  --input-color: var(--text-color);
   --input-border-size: 2px;
   --input-border-color: rgba(0,0,0,.25);
 
+  /* Select */
+  --select-bg: var(--color-bg-alt);
+  --select-color: var(--text-color);
+
   /* Button */
   --button-bg: var(--color-bg-alt);
   --button-color: #FFF;

ui/scss/component/_form-field.scss

@@ -46,6 +46,8 @@ input[type="text"].input-copyable {
     padding-left: 5px;
     padding-right: 5px;
     height: $spacing-vertical;
+    background: var(--select-bg);
+    color: var(--select-color);
     &:focus {
       outline:  var(--input-border-size) solid var(--color-primary);
     }
@@ -67,6 +69,8 @@ input[type="text"].input-copyable {
     padding-right: 1px;
     box-sizing: border-box;
     -webkit-appearance: none;
+    background: var(--input-bg);
+    color: var(--input-color);
     &[readonly] {
       background-color: #bbb;
     }
@@ -82,6 +86,7 @@ input[type="text"].input-copyable {
     line-height: 1;
     padding-top: $spacing-vertical * 1/3;
     padding-bottom: $spacing-vertical * 1/3;
+
     &.form-field__input--error {
       border-color: var(--color-error);
     }

ui/scss/component/_header.scss

@@ -45,8 +45,9 @@
   padding-right: 5px;
   @include border-radius(2px);
   border: var(--search-border);
-  transition: all var(--transition-duration) var(--transition-type);
+  transition: box-shadow var(--transition-duration) var(--transition-type);
   &:focus {
+    background: var(--search-active-bg);
     color: var(--search-active-color);
     box-shadow: var(--box-shadow-focus);
     border-color: var(--color-primary);