From e1fbe03606a2122c9bfd3ee7d57adab433de224b Mon Sep 17 00:00:00 2001
From: pirsquareff <parinthorn.sa@gmail.com>
Date: Wed, 1 Jan 2020 19:20:19 +0700
Subject: [PATCH 1/8] Adjust colors for a dark theme and define mixins

---
 src/assets/styles/_mixins.scss    | 41 +++++++++++++++++++
 src/assets/styles/_variables.scss | 66 ++++++++++++++++++++++++++++++-
 2 files changed, 105 insertions(+), 2 deletions(-)

diff --git a/src/assets/styles/_mixins.scss b/src/assets/styles/_mixins.scss
index 118d86f9..61c74f64 100644
--- a/src/assets/styles/_mixins.scss
+++ b/src/assets/styles/_mixins.scss
@@ -30,3 +30,44 @@
     @content
   }
 }
+
+@mixin themed($attached: false) {
+  @each $theme, $map in $themes {
+    $wrapped-selector: ".theme--#{$theme} &";
+    @if $attached {
+      $wrapped-selector: "&.theme--#{$theme}";
+    }
+    #{$wrapped-selector} {
+      $theme-map: () !global;
+
+      @each $key, $value in $map {
+        $theme-map: map-merge($theme-map, ($key: $value)) !global;
+      }
+
+      @content;
+      $theme-map: null !global;
+    }
+  }
+}
+
+@mixin themed-only($theme: default, $attached: false) {
+  $wrapped-selector: ".theme--#{$theme} &";
+  @if $attached {
+    $wrapped-selector: "&.theme--#{$theme}";
+  }
+  #{$wrapped-selector} {
+    $theme-map: () !global;
+    
+    $map: map-get($themes, $theme);
+    @each $key, $value in $map {
+      $theme-map: map-merge($theme-map, ($key: $value)) !global;
+    }
+
+    @content;
+    $theme-map: null !global;
+  }
+}
+
+@function tget($key) {
+  @return map-get($theme-map, $key);
+}
\ No newline at end of file
diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/_variables.scss
index e4dc128f..e5a0dc7b 100644
--- a/src/assets/styles/_variables.scss
+++ b/src/assets/styles/_variables.scss
@@ -5,29 +5,91 @@ $bp-mobile: 480px;
 /* [-----------](-----------)[-----------> */
 /*           480px       980px             */
 
+$surface-color: #ffffff;
+$surface-color--dark: #161616;
+
 $body-color: #f7f8fa;
+$body-color--dark: #0a0a0a;
+
 $body-background-size: 100% 100%;
 
 $color-text: #1e375a;
-$color-text-secondary: rgba(#1e375a, 0.6);
+$color-text--dark: #e7f1ff;
+
+$color-text-secondary: rgba($color-text, 0.6);
+$color-text-secondary--dark: rgba($color-text--dark, 0.6);
+
 $color-primary: #2364d2;
+$color-primary--dark: #4188ff;
+
 $color-warning: #ffbe00;
+$color-warning--dark: desaturate($color-warning, 20%);
+
 $color-danger: #ff4164;
+$color-danger--dark: desaturate($color-danger, 20%);
+
 $color-success: #19d78c;
+$color-success--dark: desaturate($color-success, 20%);
+
 $color-info: #96a5be;
+$color-info--dark: desaturate($color-info, 20%);
 
 $border-color: rgba($color-text, 0.05);
+$border-color--dark: rgba($color-text--dark, 0.16);
 
 $header-color: rgba($color-text, 0.97);
+$header-color--dark: rgb(24, 24, 24);
+
 $header-height: 56px;
 $header-padding-side: 15px;
 
 $overlay-color: rgba($color-text, 0.9);
+$overlay-color--dark: rgba($body-color--dark, 0.9);
+
 $overlay-z-index: 10;
 
 $terminal-color: $color-text;
+$terminal-color--dark: darken($color-text, 12%);
 
 $button-outline-hover-bg-opacity: 0.1;
+$button-outline-hover-bg-opacity--dark: 0.15;
 
-$step-selected-bg-color: rgba($color-text, 0.03)
+$step-selected-bg-color: rgba($color-text, 0.03);
+$step-selected-bg-color--dark: rgba($color-text--dark, 0.05);
 
+$themes: (
+  default: (
+    surface-color: $surface-color,
+    body-color: $body-color,
+    color-text: $color-text,
+    color-text-secondary: $color-text-secondary,
+    color-primary: $color-primary,
+    color-warning: $color-warning,
+    color-danger: $color-danger,
+    color-success: $color-success,
+    color-info: $color-info,
+    border-color: $border-color,
+    header-color: $header-color,
+    overlay-color: $overlay-color,
+    terminal-color: $terminal-color,
+    button-outline-hover-bg-opacity: $button-outline-hover-bg-opacity,
+    step-selected-bg-color: $step-selected-bg-color
+  ),
+  dark: (
+    surface-color: $surface-color--dark,
+    body-color: $body-color--dark,
+    color-text: $color-text--dark,
+    color-text-secondary: $color-text-secondary--dark,
+    color-primary: $color-primary--dark,
+    color-warning: $color-warning--dark,
+    color-danger: $color-danger--dark,
+    color-success: $color-success--dark,
+    color-info: $color-info--dark,
+    border-color: $border-color--dark,
+    header-color: $header-color--dark,
+    overlay-color: $overlay-color--dark,
+    terminal-color: $terminal-color--dark,
+    button-outline-hover-bg-opacity: $button-outline-hover-bg-opacity--dark,
+    step-selected-bg-color: $step-selected-bg-color--dark
+  ),
+);
\ No newline at end of file

From ff4f7d2ec91bed3cb42e1987c77753cb4c625d2d Mon Sep 17 00:00:00 2001
From: pirsquareff <parinthorn.sa@gmail.com>
Date: Wed, 1 Jan 2020 19:35:18 +0700
Subject: [PATCH 2/8] Apply the dark theme to components

---
 src/assets/styles/global.scss                 | 13 ++-
 src/components/Alert.vue                      | 21 +++--
 src/components/Breadcrumb.vue                 |  6 +-
 src/components/BuildsFeedIndicator.vue        | 29 +++++--
 src/components/BuildsFeedPanel.vue            | 16 +++-
 src/components/Card.vue                       | 22 +++--
 src/components/CodeSnippet.vue                | 24 ++++--
 src/components/Footer.vue                     |  8 +-
 src/components/Header.vue                     | 22 ++++-
 src/components/Help.vue                       | 20 +++--
 src/components/Hint.vue                       | 20 ++++-
 src/components/Link.vue                       |  9 +-
 src/components/Modal.vue                      |  6 +-
 src/components/NoRecentBuilds.vue             |  7 +-
 src/components/Notifications.vue              |  5 +-
 src/components/Overlay.vue                    |  5 +-
 src/components/Panel.vue                      | 11 ++-
 src/components/Popup.vue                      | 14 +++-
 src/components/RepoItem.vue                   | 41 +++++++---
 src/components/RepoItemLabel.vue              | 28 ++++---
 src/components/RepoLink.vue                   | 17 +++-
 src/components/ReposPopup.vue                 |  9 +-
 src/components/Search.vue                     |  7 +-
 src/components/Stage.vue                      | 38 ++++++---
 src/components/Status.vue                     | 13 ++-
 src/components/Step.vue                       | 27 ++++--
 src/components/Tag.vue                        | 12 ++-
 src/components/UserMenu.vue                   | 13 ++-
 src/components/buttons/Button.vue             | 82 ++++++++++++++-----
 src/components/buttons/MoreButton.vue         |  9 +-
 src/components/editable-list/EditableList.vue | 18 +++-
 src/components/forms/BaseCheckbox.vue         | 19 +++--
 src/components/forms/BaseForm.vue             | 12 ++-
 src/components/forms/BaseInput.vue            | 17 ++--
 src/components/forms/BaseRadioButtons.vue     | 18 ++--
 src/components/forms/BaseSelect.vue           | 23 ++++--
 src/components/forms/BaseTextArea.vue         | 16 +++-
 src/views/Account.vue                         |  5 +-
 src/views/Build.vue                           | 32 ++++++--
 src/views/Builds.vue                          | 21 ++++-
 src/views/Login.vue                           |  7 +-
 src/views/Logout.vue                          | 25 ++++--
 src/views/Repo.vue                            | 34 ++++++--
 src/views/Settings.vue                        |  5 +-
 44 files changed, 608 insertions(+), 198 deletions(-)

diff --git a/src/assets/styles/global.scss b/src/assets/styles/global.scss
index 7658ab04..ce777c98 100644
--- a/src/assets/styles/global.scss
+++ b/src/assets/styles/global.scss
@@ -6,17 +6,26 @@ html {
 
 html, body {
   box-sizing: border-box;
-  color: $color-text;
   font-size: 14px;
   font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
   min-height: 100%;
   margin: 0px;
   padding: 0px;
   width: 100%;
+
+  @include themed(true) {
+    color: tget("color-text");
+  }
 }
 
 body {
-  background: $body-color;
+  @include themed(true) {
+    background: tget("body-color");
+  }
+
+  &.no-transition * {
+    transition: none !important;
+  }
 }
 
 a {
diff --git a/src/components/Alert.vue b/src/components/Alert.vue
index 9fa60fb2..99890b0d 100644
--- a/src/components/Alert.vue
+++ b/src/components/Alert.vue
@@ -26,6 +26,7 @@ export default {
 
 <style scoped lang="scss">
 @import "../assets/styles/variables";
+@import "../assets/styles/mixins";
 
 .card {
   text-align: center;
@@ -33,8 +34,10 @@ export default {
 }
 
 .secondary {
-  color: $color-text-secondary;
   margin-top: 8px;
+  @include themed {
+    color: tget("color-text-secondary");
+  }
 }
 
 .theme-info,
@@ -47,18 +50,26 @@ export default {
 }
 
 .theme-success {
-  background-color: $color-success;
+  @include themed {
+    background-color: tget("color-success");
+  }
 }
 
 .theme-info {
-  background-color: $color-info;
+  @include themed {
+    background-color: tget("color-info");
+  }
 }
 
 .theme-warning {
-  background-color: $color-warning;
+  @include themed {
+    background-color: tget("color-warning");
+  }
 }
 
 .theme-danger {
-  background-color: $color-danger;
+  @include themed {
+    background-color: tget("color-danger");
+  }
 }
 </style>
diff --git a/src/components/Breadcrumb.vue b/src/components/Breadcrumb.vue
index fe82788e..fc338463 100644
--- a/src/components/Breadcrumb.vue
+++ b/src/components/Breadcrumb.vue
@@ -44,6 +44,8 @@ export default {
 
 <style scoped lang="scss">
 @import "../assets/styles/variables";
+@import "../assets/styles/mixins";
+
 
 .breadcrumbs {
   padding: 5px 0;
@@ -66,7 +68,9 @@ export default {
 
 .divider {
   padding: 0 8px;
-  color: $color-text-secondary;
   vertical-align: bottom;
+  @include themed {
+    color: tget("color-text-secondary");
+  }
 }
 </style>
diff --git a/src/components/BuildsFeedIndicator.vue b/src/components/BuildsFeedIndicator.vue
index 42ddcdc0..90dfc88b 100644
--- a/src/components/BuildsFeedIndicator.vue
+++ b/src/components/BuildsFeedIndicator.vue
@@ -85,9 +85,12 @@ export default {
 
 <style lang="scss">
 @import "../assets/styles/variables";
+@import "../assets/styles/mixins";
 
 .builds-feed-indicator .gear > g {
-  fill: $header-color;
+  @include themed {
+    fill: tget("header-color");
+  }
 }
 
 .builds-feed-indicator.status-done {
@@ -96,7 +99,9 @@ export default {
   }
 
   .circle {
-    background-color: $header-color;
+    @include themed {
+      background-color: tget("header-color");
+    }
   }
 
   .label {
@@ -109,7 +114,9 @@ export default {
     }
 
     .label {
-      color: $header-color;
+      @include themed {
+        color: tget("header-color");
+      }
     }
   }
 }
@@ -119,12 +126,16 @@ export default {
     animation: spin 5s linear infinite;
 
     .line {
-      fill: $color-warning;
       fill-opacity: 1;
+      @include themed {
+        fill: tget("color-warning");
+      }
     }
 
     .bg {
-      fill: $header-color;
+      @include themed {
+        fill: tget("header-color");
+      }
     }
   }
 
@@ -133,14 +144,18 @@ export default {
   }
 
   .label {
-    color: $color-warning;
+    @include themed {
+      color: tget("color-warning");
+    }
   }
 
   &.filled {
     .gear {
       .line,
       .bg {
-        fill: $color-warning;
+        @include themed {
+          fill: tget("color-warning");
+        }
         fill-opacity: 1;
       }
     }
diff --git a/src/components/BuildsFeedPanel.vue b/src/components/BuildsFeedPanel.vue
index 5d3eb440..fb15231f 100644
--- a/src/components/BuildsFeedPanel.vue
+++ b/src/components/BuildsFeedPanel.vue
@@ -48,6 +48,8 @@ export default {
 
 <style lang="scss">
 @import "../assets/styles/variables";
+@import "../assets/styles/mixins";
+
 
 .builds-feed-panel {
   .page-header {
@@ -57,17 +59,21 @@ export default {
   .alert {
     margin: 0 $header-padding-side;
     box-shadow: none;
-    color: $color-text-secondary;
+    @include themed {
+      color: tget("color-text-secondary");
+    }
   }
 
   .repo-item.media-mobile {
     border: none;
-    border-top: 1px solid $border-color;
-    border-bottom: 1px solid $border-color;
     box-shadow: none;
     border-radius: 0;
     padding-left: $header-padding-side;
     padding-right: $header-padding-side;
+    @include themed {
+      border-top: 1px solid tget("border-color");
+      border-bottom: 1px solid tget("border-color");
+    }
   }
 
   .repo-link.hover-type-box-shadow:focus .repo-item,
@@ -75,7 +81,9 @@ export default {
     box-shadow: none;
 
     .header {
-      color: $color-primary;
+      @include themed {
+        color: tget("color-primary");
+      }
     }
   }
 
diff --git a/src/components/Card.vue b/src/components/Card.vue
index f2088e43..a2c88f3e 100644
--- a/src/components/Card.vue
+++ b/src/components/Card.vue
@@ -23,28 +23,40 @@ export default {
 
 <style scoped lang="scss">
 @import "../assets/styles/variables";
+@import "../assets/styles/mixins";
 
 section {
   border-radius: 3px;
   box-sizing: border-box;
-  border: solid 1px #edeef1;
-  background: #ffffff;
-  box-shadow: 0 2px 4px 0 $border-color;
+  @include themed {
+    background: tget("surface-color");
+  }
+  @include themed-only(default) {
+    border: solid 1px #edeef1;
+    box-shadow: 0 2px 4px 0 $border-color;
+  }
+  @include themed-only(dark) {
+    box-shadow: 0 2px 4px 0 darken(tget("body-color"), 20%);
+  }
 }
 
 header {
   height: 50px;
   line-height: 50px;
-  border-bottom: 1px solid $border-color;
   padding: 0 15px;
   display: flex;
   align-items: center;
+  @include themed {
+    border-bottom: 1px solid tget("border-color");
+  }
 }
 
 footer {
-  background-color: rgba($color-text, 0.02);
   border-top: 1px solid $border-color;
   padding: 15px;
+  @include themed {
+    background-color: rgba(tget("color-text"), 0.02);
+  }
 }
 </style>
 
diff --git a/src/components/CodeSnippet.vue b/src/components/CodeSnippet.vue
index c4d34d68..f74d14fa 100644
--- a/src/components/CodeSnippet.vue
+++ b/src/components/CodeSnippet.vue
@@ -67,10 +67,13 @@ export default {
 
 <style scoped lang="scss">
 @import "../assets/styles/variables";
+@import "../assets/styles/mixins";
 
 div {
-  background-color: rgba($color-text, 0.02);
   border-radius: 3px;
+  @include themed {
+    background-color: rgba(tget("color-text"), 0.02);
+  }
 }
 
 header {
@@ -78,7 +81,12 @@ header {
   display: flex;
   height: 50px;
   padding: 0px 15px;
-  border-bottom: 1px solid #eff0f2;
+  @include themed-only(dark) {
+    border-bottom: 1px solid tget("border-color");
+  }
+  @include themed-only(default) {
+    border-bottom: 1px solid #eff0f2;
+  }
 }
 
 header h1,
@@ -92,8 +100,10 @@ header h3 {
   font-stretch: normal;
   line-height: normal;
   letter-spacing: normal;
-  color: $color-text;
   flex: 1;
+  @include themed {
+    color: tget("color-text");
+  }
 }
 
 pre {
@@ -104,9 +114,11 @@ pre {
   font-style: normal;
   font-stretch: normal;
   letter-spacing: normal;
-  color: $color-text;
   padding: 15px;
   white-space: normal;
+  @include themed {
+    color: tget("color-text");
+  }
 }
 
 pre.lang-terminal code:before {
@@ -162,9 +174,11 @@ code {
 }
 
 svg {
-  fill: $color-text;
   opacity: 0.25;
   width: 22px;
   height: 22px;
+  @include themed {
+    fill: tget("color-text");
+  }
 }
 </style>
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 328dc573..f35e9d0f 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -41,7 +41,9 @@ nav.nav-right {
 }
 
 nav a {
-  color: $color-text-secondary;
+  @include themed {
+    color: tget("color-text-secondary");
+  }
 
   & + a {
     margin-left: 30px;
@@ -50,7 +52,9 @@ nav a {
 
 nav a:hover,
 nav a:focus {
-  color: $color-text;
   outline: none;
+  @include themed {
+    color: tget("color-text");
+  }
 }
 </style>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 39743653..7a659278 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -104,12 +104,18 @@ export default {
 .header {
   height: $header-height;
   box-shadow: 0 2px 4px 0 $border-color;
-  background-color: $header-color;
   align-items: center;
   box-sizing: border-box;
   display: flex;
   padding: 0 $header-padding-side;
   justify-content: space-between;
+  @include themed {
+    background-color: tget("header-color");
+  }
+  @include themed-only(dark) {
+    background-color: tget("header-color");
+    box-shadow: 0 2px 4px 0 #000000;
+  }
 
   &.loading:before {
     content: "";
@@ -194,11 +200,15 @@ export default {
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 50%;
   color: #fff;
-  background-color: $header-color;
+  @include themed {
+    background-color: tget("header-color");
+  }
 
   &.filled {
-    color: $header-color;
     background-color: #fff;
+    @include themed {
+      color: tget("header-color");
+    }
   }
 
   svg {
@@ -228,6 +238,7 @@ export default {
 
 <style lang="scss">
 @import "../assets/styles/variables";
+@import "../assets/styles/mixins";
 
 .header > .search {
   > .base-input {
@@ -236,9 +247,12 @@ export default {
 
   &.opened-no {
     > .base-input {
-      background-color: mix(#fff, $header-color, 10%);
       color: #fff;
 
+      @include themed {
+        background-color: mix(#fff, tget("header-color"), 10%);
+      }
+
       &::placeholder {
         color: rgba(255, 255, 255, 0.6);
       }
diff --git a/src/components/Help.vue b/src/components/Help.vue
index 899f517c..38dd795d 100644
--- a/src/components/Help.vue
+++ b/src/components/Help.vue
@@ -51,14 +51,22 @@ export default {
   height: 18px;
   line-height: 18px;
   border-radius: 50%;
-  background: rgba($color-text, 0.3);
   text-align: center;
   font-weight: 700;
-  color: #fff;
   cursor: pointer;
   user-select: none;
-  @include hf {
-    background: rgba($color-text, 0.6);
+  @include themed {
+    color: tget("surface-color");
+    
+    @include hf {
+      background: rgba(tget("color-text"), 0.6);
+    }
+  }
+  @include themed-only(default) {
+    background: rgba(tget("color-text"), 0.3);
+  }
+  @include themed-only(dark) {
+    background: rgba(tget("color-text"), 0.4);
   }
 }
 .popup {
@@ -67,8 +75,10 @@ export default {
 .header {
   line-height: 18px;
   padding: 11px 15px;
-  border-bottom: 1px solid rgba($color-text, 0.05);
   font-weight: 600;
+  @include themed {
+    border-bottom: 1px solid rgba(tget("color-text"), 0.05);
+  }
 }
 .content {
   padding: 10px 15px;
diff --git a/src/components/Hint.vue b/src/components/Hint.vue
index 27222300..fb7517d0 100644
--- a/src/components/Hint.vue
+++ b/src/components/Hint.vue
@@ -69,16 +69,24 @@ export default {
 
 <style scoped lang="scss">
 @import "../assets/styles/variables";
+@import "../assets/styles/mixins";
 
 .hint {
   position: absolute;
   max-width: 300px;
-  background: rgba($color-text, 0.9);
   border-radius: 2px;
   padding: 6px 8px;
-  color: #fff;
   font-size: 13px;
   z-index: 1000;
+  @include themed {
+    color: tget("surface-color");
+  }
+  @include themed-only(default) {
+    background: rgba(tget("color-text"), 0.9);
+  }
+  @include themed-only(dark) {
+    background: rgba(tget("color-text"), 0.95);
+  }
 
   &.position-top {
     margin-bottom: 10px;
@@ -87,7 +95,9 @@ export default {
     .triangle {
       bottom: -5px;
       border-bottom-width: 0;
-      border-top-color: rgba($color-text, 0.9);
+      @include themed {
+        border-top-color: rgba(tget("color-text"), 0.9);
+      }
     }
   }
 
@@ -98,7 +108,9 @@ export default {
     .triangle {
       top: -5px;
       border-top-width: 0;
-      border-bottom-color: rgba($color-text, 0.9);
+      @include themed {
+        border-bottom-color: rgba(tget("color-text"), 0.9);
+      }
     }
   }
 
diff --git a/src/components/Link.vue b/src/components/Link.vue
index ed3cfb57..c789917b 100644
--- a/src/components/Link.vue
+++ b/src/components/Link.vue
@@ -4,17 +4,22 @@
 
 <style lang="scss">
 @import "../assets/styles/variables";
+@import "../assets/styles/mixins";
 
 .link {
   text-decoration: none;
-  color: $color-primary;
+  @include themed {
+    color: tget("color-primary");
+  }
 }
 
 .link:focus,
 .link:hover {
   position: relative;
-  color: $color-primary;
   outline: none;
+  @include themed {
+    color: tget("color-primary");
+  }
 }
 
 .link:focus:after,
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index b7c5b51d..566423aa 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -23,6 +23,8 @@ export default {
 
 <style lang="scss">
 @import "../assets/styles/variables";
+@import "../assets/styles/mixins";
+
 .modal-container {
   position: fixed;
   top: 0;
@@ -36,10 +38,12 @@ export default {
   padding: $header-padding-side;
 }
 .modal-content {
-  background: #fff;
   box-shadow: 0 2px 4px 0 rgba(25, 45, 70, 0.05);
   border: solid 1px #edeef1;
   border-radius: 3px;
   min-width: 0;
+  @include themed {
+    background: tget("surface-color");
+  }
 }
 </style>
diff --git a/src/components/NoRecentBuilds.vue b/src/components/NoRecentBuilds.vue
index 0a51f101..9ec138e9 100644
--- a/src/components/NoRecentBuilds.vue
+++ b/src/components/NoRecentBuilds.vue
@@ -18,7 +18,8 @@ export default {
 </script>
 
 <style scoped lang="scss">
-@import "../assets/styles/_variables.scss";
+@import "../assets/styles/variables.scss";
+@import "../assets/styles/mixins";
 
 .no-recent-builds {
   text-align: center;
@@ -29,7 +30,9 @@ export default {
 }
 
 .message {
-  color: $color-text-secondary;
   line-height: normal;
+  @include themed {
+    color: tget("color-text-secondary");
+  }
 }
 </style>
diff --git a/src/components/Notifications.vue b/src/components/Notifications.vue
index d0eb38c8..b9bbb3ae 100644
--- a/src/components/Notifications.vue
+++ b/src/components/Notifications.vue
@@ -33,6 +33,7 @@ export default {
 
 <style scoped lang="scss">
 @import "../assets/styles/variables";
+@import "../assets/styles/mixins";
 
 .notifications {
   position: fixed;
@@ -43,10 +44,12 @@ export default {
 .notification {
   position: relative;
   max-width: 300px;
-  background: rgba($color-text, 0.9);
   border-radius: 2px;
   padding: 11px 60px 11px 15px;
   color: #fff;
+  @include themed {
+    background: rgba(tget("color-text"), 0.9);
+  }
 }
 
 .notification + .notification {
diff --git a/src/components/Overlay.vue b/src/components/Overlay.vue
index cbeced38..cea8d610 100644
--- a/src/components/Overlay.vue
+++ b/src/components/Overlay.vue
@@ -17,9 +17,9 @@ export default {
 
 <style scoped lang="scss">
 @import "../assets/styles/variables";
+@import "../assets/styles/mixins";
 
 .overlay {
-  background: $overlay-color;
   position: fixed;
   top: 0;
   right: 0;
@@ -28,5 +28,8 @@ export default {
   z-index: $overlay-z-index;
   display: block;
   transition-duration: 0.25s;
+  @include themed {
+    background: tget("overlay-color");
+  }
 }
 </style>
diff --git a/src/components/Panel.vue b/src/components/Panel.vue
index 86a36964..34bbdd66 100644
--- a/src/components/Panel.vue
+++ b/src/components/Panel.vue
@@ -21,13 +21,16 @@ export default {
 
 <style scoped lang="scss">
 @import "../assets/styles/variables";
+@import "../assets/styles/mixins";
 
 .panel {
   width: 360px;
-  box-shadow: 0 2px 4px 0 rgba($color-text, 0.1);
   overflow: hidden;
   flex-shrink: 0;
   display: none;
+  @include themed {
+    box-shadow: 0 2px 4px 0 rgba(tget("color-text"), 0.1);
+  }
 
   &.opened-yes {
     display: block;
@@ -50,8 +53,10 @@ export default {
   position: fixed;
   top: $header-height;
   bottom: 0;
-  background-color: #fff;
   overflow: auto;
-  border: 1px solid rgba($color-text, 0.1);
+  @include themed {
+    background-color: tget("surface-color");
+    border: 1px solid rgba(tget("color-text"), 0.1);
+  }
 }
 </style>
diff --git a/src/components/Popup.vue b/src/components/Popup.vue
index 83d42291..16d5e2fc 100644
--- a/src/components/Popup.vue
+++ b/src/components/Popup.vue
@@ -44,11 +44,19 @@ export default {
 @import "../assets/styles/mixins";
 .popup {
   position: absolute;
-  background: #fff;
   z-index: 5;
   border-radius: 3px;
-  box-shadow: 0 2px 4px 0 rgba(25, 45, 70, 0.05);
-  border: solid 1px #edeef1;
+  @include themed {
+    background: tget("surface-color");
+  }
+  @include themed-only(default) {
+    border: solid 1px #edeef1;
+    box-shadow: 0 2px 4px 0 rgba(25, 45, 70, 0.05);
+  }
+  @include themed-only(dark) {
+    border: solid 1px tget("border-color");
+    box-shadow: 0 2px 4px 0 #000000;
+  }
   &.popup.evict {
     transform: translateX(-9999px);
   }
diff --git a/src/components/RepoItem.vue b/src/components/RepoItem.vue
index 93d29f4f..b320497a 100644
--- a/src/components/RepoItem.vue
+++ b/src/components/RepoItem.vue
@@ -116,12 +116,19 @@ export default {
 .repo-item {
   border-radius: 4px;
   box-sizing: border-box;
-  box-shadow: 0 2px 4px 0 rgba($color-text, 0.1);
   border: solid 1px $border-color;
-  background-color: #ffffff;
-  color: $color-text;
   padding: 15px;
-  transition: box-shadow linear 0.2s;
+  transition: box-shadow linear 0.2s, background linear 0.2s;
+  @include themed {
+    color: tget("color-text");
+    background: tget("surface-color");
+  }
+  @include themed-only(default) {
+    box-shadow: 0 2px 4px 0 rgba(tget("color-text"), 0.1);
+  }
+  @include themed-only(dark) {
+    box-shadow: 0 2px 4px 0 rgba(tget("body-color"), 0.5);
+  }
 
   @include mobile(true) {
     padding: 10px;
@@ -179,7 +186,9 @@ export default {
   height: 22px;
   font-size: 18px;
   line-height: normal;
-  color: $color-text;
+  @include themed {
+    color: tget("color-text");
+  }
   display: flex;
   align-items: flex-start;
 
@@ -214,16 +223,20 @@ export default {
   height: 15px;
   opacity: 0.2;
   border-bottom-left-radius: 8px;
-  border-left: solid 1px $color-text;
-  border-bottom: solid 1px $color-text;
   margin-left: 9px;
+  @include themed {
+    border-left: solid 1px tget("color-text");
+    border-bottom: solid 1px tget("color-text");
+  }
 }
 
 .icon-repository {
   width: 20px;
   height: 20px;
   margin-right: 10px;
-  color: $color-info;
+  @include themed {
+    color: tget("color-info");
+  }
   flex-shrink: 0;
 }
 
@@ -239,7 +252,9 @@ export default {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  color: $color-text-secondary;
+  @include themed {
+    color: tget("color-text-secondary");
+  }
 
   .header + & {
     margin-top: 6px;
@@ -260,7 +275,9 @@ export default {
   text-overflow: ellipsis;
   white-space: nowrap;
   line-height: normal;
-  color: $color-text-secondary;
+  @include themed {
+    color: tget("color-text-secondary");
+  }
   margin-right: 15px;
 
   .divider {
@@ -305,9 +322,11 @@ export default {
   display: inline-block;
   width: 3px;
   height: 3px;
-  background: rgba($color-text, 0.25);
   border-radius: 50%;
   margin: 0 6px;
+  @include themed {
+    background: rgba(tget("color-text"), 0.25);
+  }
 }
 </style>
 
diff --git a/src/components/RepoItemLabel.vue b/src/components/RepoItemLabel.vue
index 3fd18622..f45cc289 100644
--- a/src/components/RepoItemLabel.vue
+++ b/src/components/RepoItemLabel.vue
@@ -45,20 +45,16 @@ export default {
       }
     },
     hrefPR() {
-      return this.build && this.repo &&
-        `/link/${this.repo.slug}/tree/${this.build.ref}`;
+      return this.build && this.repo && `/link/${this.repo.slug}/tree/${this.build.ref}`;
     },
     hrefTag() {
-      return this.build && this.repo &&
-        `/link/${this.repo.slug}/tree/${this.build.ref}`;
+      return this.build && this.repo && `/link/${this.repo.slug}/tree/${this.build.ref}`;
     },
     hrefBranch() {
-      return this.build && this.repo &&
-        `/link/${this.repo.slug}/tree/refs/heads/${this.build.target}`;
+      return this.build && this.repo && `/link/${this.repo.slug}/tree/refs/heads/${this.build.target}`;
     },
     hrefCommit() {
-      return this.build && this.repo &&
-        `/link/${this.repo.slug}/commit/${this.build.after}`;
+      return this.build && this.repo && `/link/${this.repo.slug}/commit/${this.build.after}`;
     },
     branch() {
       return this.build.target;
@@ -95,16 +91,26 @@ export default {
 
 <style scoped lang="scss">
 @import "../assets/styles/variables";
+@import "../assets/styles/mixins";
 
 .repo-item-label {
-  background-color: rgba($color-primary, 0.07);
-  color: $color-primary;
   padding: 0 4px;
   border-radius: 2px;
+  @include themed {
+    color: tget("color-primary");
+  }
+  @include themed-only(default) {
+    background-color: rgba(tget("color-primary"), 0.07);
+  }
+  @include themed-only(dark) {
+    background-color: rgba(tget("color-primary"), 0.11);
+  }
 }
 
 a.repo-item-label:hover,
 a.repo-item-label:focus {
-  background-color: rgba($color-primary, $button-outline-hover-bg-opacity);
+  @include themed {
+    background-color: rgba(tget("color-primary"), tget("button-outline-hover-bg-opacity"));
+  }
 }
 </style>
diff --git a/src/components/RepoLink.vue b/src/components/RepoLink.vue
index cae0b5ec..d96686b2 100644
--- a/src/components/RepoLink.vue
+++ b/src/components/RepoLink.vue
@@ -33,6 +33,7 @@ export default {
 
 <style lang="scss">
 @import "../assets/styles/variables";
+@import "../assets/styles/mixins";
 
 .repo-link.hover-type-box-shadow:focus {
   outline: none;
@@ -40,14 +41,24 @@ export default {
 
 .repo-link.hover-type-box-shadow:focus .repo-item,
 .repo-link.hover-type-box-shadow:hover .repo-item {
-  box-shadow: 0 4px 10px 0 rgba($color-text, 0.2);
+  @include themed-only(dark) {
+    background: lighten(tget("surface-color"), 3%);
+    box-shadow: 0 4px 10px 0 darken(tget("body-color"), 20%);
+  }
+  @include themed-only(default) {
+    box-shadow: 0 4px 10px 0 rgba(tget("color-text"), 0.2);
+  }
 }
 
 .repo-link .repo-item.active-yes .header .title {
-  color: $color-primary;
+  @include themed {
+    color: tget("color-primary");
+  }
 }
 
 .repo-link .repo-item.build-no.active-no .header .title {
-  color: $color-text;
+  @include themed {
+    color: tget("color-text");
+  }
 }
 </style>
diff --git a/src/components/ReposPopup.vue b/src/components/ReposPopup.vue
index 633443c5..91710921 100644
--- a/src/components/ReposPopup.vue
+++ b/src/components/ReposPopup.vue
@@ -97,6 +97,7 @@ export default {
 
 <style scoped lang="scss">
 @import "../assets/styles/variables";
+@import "../assets/styles/mixins";
 
 .repo-link {
   outline: none;
@@ -111,7 +112,9 @@ export default {
 }
 
 .repo-link + .repo-link {
-  border-top: 1px solid $border-color;
+  @include themed {
+    border-top: 1px solid tget("border-color");
+  }
 }
 
 .repo-item {
@@ -121,7 +124,9 @@ export default {
 
 .text {
   text-align: center;
-  color: $color-text-secondary;
   padding: 16px;
+  @include themed {
+    color: tget("color-text-secondary");
+  }
 }
 </style>
diff --git a/src/components/Search.vue b/src/components/Search.vue
index 16bc5d18..df808bbc 100644
--- a/src/components/Search.vue
+++ b/src/components/Search.vue
@@ -131,6 +131,7 @@ export default {
 
 <style scoped lang="scss">
 @import "../assets/styles/variables";
+@import "../assets/styles/mixins";
 
 form {
   position: relative;
@@ -169,14 +170,16 @@ form.opened-yes {
   position: absolute;
   top: 10px;
   right: 10px;
-  border: solid 1px rgba($color-text, 0.25);
   border-radius: 2px;
   text-align: center;
   line-height: 16px;
-  color: $color-text-secondary;
   pointer-events: none;
   user-select: none;
   z-index: 25;
+  @include themed {
+    border: solid 1px rgba(tget("color-text"), 0.25);
+    color: tget("color-text-secondary");
+  }
 }
 
 .popup {
diff --git a/src/components/Stage.vue b/src/components/Stage.vue
index 7143f038..f32b8926 100644
--- a/src/components/Stage.vue
+++ b/src/components/Stage.vue
@@ -45,17 +45,22 @@ export default {
 
 <style scoped lang="scss">
 @import "../assets/styles/variables";
+@import "../assets/styles/mixins";
 
 .stage {
-  background: #ffffff;
-  box-shadow: 0 2px 4px 0 rgba($color-text, 0.1);
-  border: 1px solid rgba($color-text, 0.1);
   border-radius: 4px;
   box-sizing: border-box;
   user-select: none;
+  @include themed {
+    background: tget("surface-color");
+    box-shadow: 0 2px 4px 0 rgba(tget("color-text"), 0.1);
+    border: 1px solid rgba(tget("color-text"), 0.1);
+  }
 
   &.has-content header {
-    border-bottom: solid 1px rgba($color-text, 0.1);
+    @include themed {
+      border-bottom: solid 1px rgba(tget("color-text"), 0.1);
+    }
   }
 }
 
@@ -65,7 +70,9 @@ header {
   height: 40px;
   padding: 0 15px;
   user-select: none;
-  color: $color-text;
+  @include themed {
+    color: tget("color-text");
+  }
 }
 
 .status {
@@ -87,8 +94,10 @@ span {
   font-size: 13px;
   font-weight: 400;
   flex-shrink: 0;
-  color: $color-text;
   position: relative;
+  @include themed {
+    color: tget("color-text");
+  }
 
   .hint {
     white-space: nowrap;
@@ -97,7 +106,9 @@ span {
 
 .arrow-dropdown {
   display: none;
-  color: $color-text-secondary;
+  @include themed {
+    color: tget("color-text-secondary");
+  }
 }
 
 .content {
@@ -113,6 +124,7 @@ span {
 
 <style lang="scss">
 @import "../assets/styles/variables";
+@import "../assets/styles/mixins";
 
 .stage > .content {
   > .step-container {
@@ -126,14 +138,20 @@ span {
 
     > a {
       display: block;
-      color: $color-text;
+      @include themed {
+        color: tget("color-text");
+      }
 
       &:hover,
       &:focus {
-        background: $step-selected-bg-color;
+        @include themed {
+          background: tget("step-selected-bg-color");
+        }
 
         .status.status-running svg circle {
-          fill: $step-selected-bg-color;
+          @include themed {
+            fill: tget("step-selected-bg-color");
+          }
         }
       }
     }
diff --git a/src/components/Status.vue b/src/components/Status.vue
index b8e86cb3..1b0a5bc3 100644
--- a/src/components/Status.vue
+++ b/src/components/Status.vue
@@ -80,6 +80,7 @@ export default {
 
 <style scoped lang="scss">
 @import "../assets/styles/variables";
+@import "../assets/styles/mixins";
 
 .status {
   display: inline-block;
@@ -93,15 +94,21 @@ export default {
 }
 
 .theme-success {
-  background-color: $color-success;
+  @include themed {
+    background-color: tget("color-success");
+  }
 }
 
 .theme-danger {
-  background-color: $color-danger;
+  @include themed {
+    background-color: tget("color-danger");
+  }
 }
 
 .theme-info {
-  background-color: $color-info;
+  @include themed {
+    background-color: tget("color-info");
+  }
 }
 
 .hint {
diff --git a/src/components/Step.vue b/src/components/Step.vue
index e7fbffc7..a3b7229a 100644
--- a/src/components/Step.vue
+++ b/src/components/Step.vue
@@ -34,6 +34,7 @@ export default {
 
 <style scoped lang="scss">
 @import "../assets/styles/variables";
+@import "../assets/styles/mixins";
 
 .step {
   align-items: center;
@@ -43,7 +44,9 @@ export default {
   height: 40px;
 
   &.selected {
-    background-color: $step-selected-bg-color;
+    @include themed {
+      background-color: tget("step-selected-bg-color");
+    }
   }
 }
 
@@ -62,37 +65,49 @@ export default {
 }
 
 time {
-  color: $color-text-secondary;
   text-align: right;
   flex-shrink: 0;
   margin-left: 10px;
   font-size: 13px;
+  @include themed {
+    color: tget("color-text-secondary");
+  }
 }
 
 .icon-arrow-dropdown {
   flex-shrink: 0;
-  color: $color-text-secondary;
+  @include themed {
+    color: tget("color-text-secondary");
+  }
 }
 
 section:after {
   content: " ";
-  border-left: 1px solid rgba($color-text, 0.1);
   width: 1px;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 24px;
+  @include themed {
+    border-left: 1px solid rgba(tget("color-text"), 0.1);
+  }
 }
 </style>
 
 <style lang="scss">
 @import "../assets/styles/variables";
+@import "../assets/styles/mixins";
 
 .step > .status.status-running svg circle {
-  fill: #fff;
+  // fill: #fff;
+  @include themed {
+    fill: tget("surface-color");
+  }
 }
 
 .step.selected > .status.status-running svg circle {
-  fill: $step-selected-bg-color;
+  @include themed {
+    fill: tget("step-selected-bg-color");
+  }
 }
 </style>
diff --git a/src/components/Tag.vue b/src/components/Tag.vue
index 4254335e..40b5dbf9 100644
--- a/src/components/Tag.vue
+++ b/src/components/Tag.vue
@@ -4,15 +4,23 @@
 
 <style scoped lang="scss">
 @import "../assets/styles/variables";
+@import "../assets/styles/mixins";
 
 span {
   display: inline-block;
-  background: rgba($color-text, 0.03);
-  color: $color-text-secondary;
   font-size: 11px;
   text-transform: uppercase;
   padding: 0 10px;
   line-height: 24px;
   border-radius: 2px;
+  @include themed {
+    color: tget("color-text-secondary");
+  }
+  @include themed-only(default) {
+    background: rgba(tget("color-text"), 0.03);
+  }
+  @include themed-only(dark) {
+    background: rgba(tget("color-text"), 0.07);
+  }
 }
 </style>
diff --git a/src/components/UserMenu.vue b/src/components/UserMenu.vue
index cbb77307..b7a44a96 100644
--- a/src/components/UserMenu.vue
+++ b/src/components/UserMenu.vue
@@ -55,6 +55,7 @@ export default {
 
 <style scoped lang="scss">
 @import "../assets/styles/variables";
+@import "../assets/styles/mixins";
 
 .user-menu {
   display: inline-block;
@@ -72,7 +73,9 @@ export default {
 .popup a {
   display: block;
   padding: 11px 30px 11px 15px;
-  color: $color-text;
+  @include themed {
+    color: tget("color-text");
+  }
 }
 
 .popup a.logout {
@@ -81,12 +84,16 @@ export default {
 
 .popup a:focus,
 .popup a:hover {
-  background: rgba($color-text, 0.03);
   outline: none;
+  @include themed {
+    background: rgba(tget("color-text"), 0.03);
+  }
 }
 
 .popup a + a {
-  border-top: 1px solid $border-color;
+  @include themed {
+    border-top: 1px solid tget("border-color");
+  }
 }
 
 .avatar {
diff --git a/src/components/buttons/Button.vue b/src/components/buttons/Button.vue
index 9c9a6b83..3016eb93 100644
--- a/src/components/buttons/Button.vue
+++ b/src/components/buttons/Button.vue
@@ -112,7 +112,9 @@ export default {
 }
 
 .button.bordered {
-  border: 1px solid rgba($color-text, 0.25);
+  @include themed {
+    border: 1px solid rgba(tget("color-text"), 0.25);
+  }
 }
 
 .button.bordered.size-m {
@@ -124,27 +126,40 @@ export default {
 }
 
 .button.theme-default {
-  background-color: $color-text;
+  @include themed {
+    background-color: tget("color-text");
+  }
 }
 
 .button.theme-light {
-  background-color: #fff;
+  @include themed {
+    background-color: #fff;
+  }
 }
 
 .button.theme-primary {
-  background-color: $color-primary;
+  @include themed {
+    background-color: tget("color-primary");
+  }
 }
 
 .button.theme-danger {
-  background-color: #ff4164;
+  @include themed {
+    background-color: tget("color-danger");
+  }
 }
 
 .button.outline {
-  background-color: transparent;
+  @include themed {
+    background-color: transparent;
+  }
 }
 
 .button.theme-default.outline {
-  color: $color-text;
+  @include themed {
+    background-color: transparent;
+    color: tget("color-text");
+  }
 }
 
 .button.theme-light.outline {
@@ -152,51 +167,71 @@ export default {
 }
 
 .button.theme-primary.outline {
-  color: $color-primary;
+  @include themed {
+    color: tget("color-primary");
+  }
 }
 
 .button.theme-danger.outline {
-  color: #ff4164;
+  @include themed {
+    color: tget("color-danger");
+  }
 }
 
 .button:focus {
-  outline: none;
+  @include themed {
+    outline: none;
+  }
 }
 
 .button.bordered:hover,
 .button.bordered:focus {
-  border-color: $color-primary;
+  @include themed {
+    border-color: tget("color-primary");
+  }
 }
 
 .button.theme-default:focus,
 .button.theme-default:hover {
-  background-color: rgba($color-text, 0.8);
+  @include themed {
+    background-color: rgba(tget("color-text"), 0.8);
+  }
 }
 
 .button.theme-default.outline:focus,
 .button.theme-default.outline:hover {
-  color: $color-primary;
-  background-color: transparent;
+  @include themed {
+    background-color: transparent;
+    color: tget("color-primary");
+  }
 }
 
 .button.theme-primary:focus,
 .button.theme-primary:hover {
-  background-color: #085cc1;
+  @include themed {
+    background-color: #085cc1;
+  }
 }
 
 .button.theme-primary.outline:focus,
 .button.theme-primary.outline:hover {
-  background-color: rgba(5, 100, 215, $button-outline-hover-bg-opacity);
+  @include themed {
+    background-color: rgba(5, 100, 215, tget("button-outline-hover-bg-opacity"));
+  }
 }
 
 .button.theme-danger:focus,
 .button.theme-danger:hover {
-  background-color: #dd3e60;
+  @include themed {
+    background-color: #dd3e60;
+  }
 }
 
 .button.theme-danger.outline:focus,
 .button.theme-danger.outline:hover {
-  background-color: rgba(255, 65, 100, $button-outline-hover-bg-opacity);
+  @include themed {
+    background-color: rgba(255, 65, 100, tget("button-outline-hover-bg-opacity"));
+  }
 }
 
 .button.loading {
@@ -222,14 +257,19 @@ export default {
 }
 
 .button.theme-danger.outline.loading:before {
-  border-color: #dd3e60;
+  @include themed {
+    border-color: #dd3e60;
+  }
 }
 
 .button[disabled],
 .button:hover[disabled] {
   cursor: not-allowed;
   opacity: 0.25;
-  border-color: rgba($color-text, 0.5);
-  color: $color-text;
+
+  @include themed {
+    border-color: rgba(tget("color-text"), 0.5);
+    color: tget("color-text");
+  }
 }
 </style>
diff --git a/src/components/buttons/MoreButton.vue b/src/components/buttons/MoreButton.vue
index bb0e99e0..3b73e7b8 100644
--- a/src/components/buttons/MoreButton.vue
+++ b/src/components/buttons/MoreButton.vue
@@ -20,6 +20,7 @@ export default {
 
 <style scoped lang="scss">
 @import "../../assets/styles/variables";
+@import "../../assets/styles/mixins";
 
 button.more-button {
   display: flex;
@@ -44,7 +45,9 @@ button.more-button:focus span {
 
 button.more-button:hover svg,
 button.more-button:focus svg {
-  color: $color-primary;
+  @include themed {
+    color: tget("color-primary");
+  }
 }
 
 button svg + span {
@@ -58,7 +61,9 @@ span {
 }
 
 svg {
-  color: $color-text-secondary;
+  @include themed {
+    color: tget("color-text-secondary");
+  }
   margin: 5px 0 0;
 }
 </style>
diff --git a/src/components/editable-list/EditableList.vue b/src/components/editable-list/EditableList.vue
index 3e698f2f..0089170d 100644
--- a/src/components/editable-list/EditableList.vue
+++ b/src/components/editable-list/EditableList.vue
@@ -81,15 +81,18 @@ export default {
 
 <style scoped lang="scss">
 @import "../../assets/styles/variables";
+@import "../../assets/styles/mixins";
 
 .title {
   flex-grow: 1;
 }
 
 .empty {
-  color: $color-text-secondary;
   padding: 30px 0;
   text-align: center;
+  @include themed {
+    color: tget("color-text-secondary");
+  }
 }
 
 .editable-list-item-wrapper + .editable-list-item-wrapper {
@@ -109,6 +112,7 @@ export default {
 
 <style lang="scss">
 @import "../../assets/styles/variables";
+@import "../../assets/styles/mixins";
 
 .editable-list form {
   input[type="text"],
@@ -116,7 +120,9 @@ export default {
     display: block;
     margin-bottom: 15px;
     width: 100%;
-    border-color: rgba($color-text, 0.15);
+    @include themed {
+      border-color: rgba(tget("color-text"), 0.15);
+    }
   }
 
   textarea {
@@ -126,12 +132,16 @@ export default {
   }
 
   select {
-    border-color: rgba($color-text, 0.15);
     margin-bottom: 15px;
+    @include themed {
+      border-color: rgba(tget("color-text"), 0.15);
+    }
   }
 
   .base-checkbox label:before {
-    border-color: rgba($color-text, 0.15);
+    @include themed {
+      border-color: rgba(tget("color-text"), 0.15);
+    }
   }
 }
 </style>
diff --git a/src/components/forms/BaseCheckbox.vue b/src/components/forms/BaseCheckbox.vue
index c40bf9ad..245ff9e3 100644
--- a/src/components/forms/BaseCheckbox.vue
+++ b/src/components/forms/BaseCheckbox.vue
@@ -25,6 +25,7 @@ export default {
 
 <style scoped lang="scss">
 @import "../../assets/styles/variables";
+@import "../../assets/styles/mixins";
 
 .base-checkbox {
   display: inline-block;
@@ -50,24 +51,32 @@ label:before {
   position: absolute;
   width: 18px;
   height: 18px;
-  border: 1px solid rgba($color-text, 0.25);
   border-radius: 3px;
   top: 0;
   left: 0;
-  background-color: #fff;
+  @include themed {
+    background-color: tget("surface-color");
+    border: 1px solid rgba(tget("color-text"), 0.25);
+  }
 }
 
 label:hover:before {
-  border-color: $color-primary;
+  @include themed {
+    border-color: tget("color-primary");
+  }
 }
 
 input:focus + label:before {
-  box-shadow: 0 0 4px 1px $color-primary;
+  @include themed {
+    box-shadow: 0 0 4px 1px tget("color-primary");
+  }
 }
 
 input:checked + label:before {
-  background: $color-primary;
   border-color: transparent;
+  @include themed {
+    background: tget("color-primary");
+  }
 }
 
 input:checked + label:after {
diff --git a/src/components/forms/BaseForm.vue b/src/components/forms/BaseForm.vue
index 03e50425..77998024 100644
--- a/src/components/forms/BaseForm.vue
+++ b/src/components/forms/BaseForm.vue
@@ -38,13 +38,17 @@ export default {
 }
 
 .control-group + .control-group {
-  border-top: 1px solid $border-color;
+  @include themed {
+    border-top: 1px solid tget("border-color");
+  }
 }
 
 .control-group .control-label {
   flex: 0 0 150px;
   margin-right: 15px;
-  color: $color-text-secondary;
+  @include themed {
+    color: tget("color-text-secondary");
+  }
 
   @include tablet {
     flex-basis: auto;
@@ -58,8 +62,10 @@ export default {
 }
 
 .control-actions {
-  border-top: 1px solid $border-color;
   padding-top: 15px;
+  @include themed {
+    border-top: 1px solid tget("border-color");
+  }
 }
 
 .control-actions > .error-message {
diff --git a/src/components/forms/BaseInput.vue b/src/components/forms/BaseInput.vue
index 0b11ade8..b3c9d4f8 100644
--- a/src/components/forms/BaseInput.vue
+++ b/src/components/forms/BaseInput.vue
@@ -13,17 +13,20 @@ export default {
 
 <style scoped lang="scss">
 @import "../../assets/styles/variables";
+@import "../../assets/styles/mixins";
 
 input {
-  color: $color-text;
-  border: 1px solid rgba($color-text, 0.25);
   border-radius: 3px;
   box-sizing: border-box;
   font-size: 14px;
   padding: 10px 15px;
   height: 40px;
   line-height: 20px;
-  background: #fff;
+  @include themed {
+    background: tget("surface-color");
+    color: tget("color-text");
+    border: 1px solid rgba(tget("color-text"), 0.25);
+  }
 }
 
 input[type="search"], input[type=text] {
@@ -31,11 +34,15 @@ input[type="search"], input[type=text] {
 }
 
 input:focus {
-  border-color: $color-primary;
   outline: none;
+  @include themed {
+    border-color: tget("color-primary");
+  }
 }
 
 input::placeholder {
-  color: $color-text-secondary;
+  @include themed {
+    color: tget("color-text-secondary");
+  }
 }
 </style>
diff --git a/src/components/forms/BaseRadioButtons.vue b/src/components/forms/BaseRadioButtons.vue
index e53c46e9..29c9ebbe 100644
--- a/src/components/forms/BaseRadioButtons.vue
+++ b/src/components/forms/BaseRadioButtons.vue
@@ -60,24 +60,32 @@ label:before {
   position: absolute;
   width: 18px;
   height: 18px;
-  border: 1px solid rgba($color-text, 0.25);
   border-radius: 50%;
   top: 0;
   left: 0;
-  background-color: #fff;
+  @include themed {
+    background-color: tget("surface-color");
+    border: 1px solid rgba(tget("color-text"), 0.25);
+  }
 }
 
 label:hover:before {
-  border-color: $color-primary;
+  @include themed {
+    border-color: tget("color-primary");
+  }
 }
 
 input:focus + label:before {
-  box-shadow: 0 0 4px 1px $color-primary;
+  @include themed {
+    box-shadow: 0 0 4px 1px tget("color-primary");
+  }
 }
 
 input:checked + label:before {
-  background: $color-primary;
   border-color: transparent;
+  @include themed {
+    background: tget("color-primary");
+  }
 }
 
 input:checked + label:after {
diff --git a/src/components/forms/BaseSelect.vue b/src/components/forms/BaseSelect.vue
index a83f457f..9107490e 100644
--- a/src/components/forms/BaseSelect.vue
+++ b/src/components/forms/BaseSelect.vue
@@ -16,10 +16,9 @@ export default {
 
 <style scoped lang="scss">
 @import "../../assets/styles/variables";
+@import "../../assets/styles/mixins";
 
 select {
-  color: $color-text;
-  border: 1px solid rgba($color-text, 0.25);
   border-radius: 3px;
   box-sizing: border-box;
   font-size: 14px;
@@ -27,18 +26,26 @@ select {
   height: 40px;
   line-height: 40px;
   -webkit-appearance: none;
-  background: #fff
-    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAnIGhlaWdodD0nMTAwJz48cG9seWdvbiBmaWxsPScjOThhMWFiJyBwb2ludHM9JzAsMzAgMTAwLCAzMCA1MCw5MCcvPjwvc3ZnPg==")
-    no-repeat center right 10px;
-  background-size: 10px;
+  @include themed {
+    color: tget("color-text");
+    border: 1px solid rgba(tget("color-text"), 0.25);
+    background: tget("surface-color")
+      url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAnIGhlaWdodD0nMTAwJz48cG9seWdvbiBmaWxsPScjOThhMWFiJyBwb2ludHM9JzAsMzAgMTAwLCAzMCA1MCw5MCcvPjwvc3ZnPg==")
+      no-repeat center right 10px;
+    background-size: 10px;
+  }
 }
 
 select:focus {
-  border-color: $color-primary;
   outline: none;
+  @include themed {
+    border-color: tget("color-primary");
+  }
 }
 
 select::placeholder {
-  color: $color-text-secondary;
+  @include themed {
+    color: tget("color-text-secondary");
+  }
 }
 </style>
diff --git a/src/components/forms/BaseTextArea.vue b/src/components/forms/BaseTextArea.vue
index 9c88c930..0fb2e891 100644
--- a/src/components/forms/BaseTextArea.vue
+++ b/src/components/forms/BaseTextArea.vue
@@ -13,10 +13,9 @@ export default {
 
 <style scoped lang="scss">
 @import "../../assets/styles/variables";
+@import "../../assets/styles/mixins";
 
 textarea {
-  color: $color-text;
-  border: 1px solid rgba($color-text, 0.25);
   border-radius: 3px;
   box-sizing: border-box;
   font-size: 14px;
@@ -24,14 +23,23 @@ textarea {
   height: 40px;
   line-height: 40px;
   -webkit-appearance: none;
+  @include themed {
+    background: tget("surface-color");
+    color: tget("color-text");
+    border: 1px solid rgba(tget("color-text"), 0.25);
+  }
 }
 
 textarea:focus {
-  border-color: $color-primary;
   outline: none;
+  @include themed {
+    border-color: tget("color-primary");
+  }
 }
 
 textarea::placeholder {
-  color: $color-text-secondary;
+  @include themed {
+    color: tget("color-text-secondary");
+  }
 }
 </style>
diff --git a/src/views/Account.vue b/src/views/Account.vue
index 4e936844..cff5c027 100644
--- a/src/views/Account.vue
+++ b/src/views/Account.vue
@@ -80,6 +80,7 @@ export default {
 
 <style scoped lang="scss">
 @import "../assets/styles/variables";
+@import "../assets/styles/mixins";
 
 h1 {
   height: 41px;
@@ -89,8 +90,10 @@ h1 {
   font-stretch: normal;
   line-height: normal;
   letter-spacing: normal;
-  color: $color-text;
   margin: 30px 0px;
+  @include themed {
+    color: tget("color-text");
+  }
 }
 
 code {
diff --git a/src/views/Build.vue b/src/views/Build.vue
index 6947bebd..5c18c8b6 100644
--- a/src/views/Build.vue
+++ b/src/views/Build.vue
@@ -586,11 +586,15 @@ $output-border-radius: 6px;
   font-size: 12px;
   font-family: Menlo, Courier, monospace;
   font-weight: 300;
-  background-color: $terminal-color;
   border-radius: $output-border-radius;
-  box-shadow: 0px 0px 8px 1px #e8eaed;
   box-sizing: border-box;
   padding: 0;
+  @include themed {
+    background-color: tget("terminal-color");
+  }
+  @include themed-only(default) {
+    box-shadow: 0px 0px 8px 1px #e8eaed;
+  }
 }
 
 .output.show-to-top .to-top {
@@ -667,13 +671,14 @@ $output-header-sticky-offset: 20px;
   bottom: $output-header-height - $output-border-radius;
   left: -10px; // hide box-shadow of content
   right: -10px;
-  background: $body-color;
   z-index: $output-header-before-z-index;
+  @include themed {
+    background: tget("body-color");
+  }
 }
 
 .output-header-content {
   position: relative;
-  background: $terminal-color;
   padding: 0 5px 0 15px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.05);
   border-top: 1px solid transparent;
@@ -685,6 +690,9 @@ $output-header-sticky-offset: 20px;
   border-radius: 6px 6px 0 0;
   z-index: $output-header-before-z-index + 1;
   height: 100%;
+  @include themed {
+    background-color: tget("terminal-color");
+  }
 }
 
 .output-title {
@@ -800,10 +808,15 @@ $output-header-sticky-offset: 20px;
   cursor: pointer;
   width: 21px;
   height: 30px;
-  background: $color-text;
   color: rgba(255, 255, 255, 0.75);
   display: none;
   border-bottom-right-radius: 6px;
+  @include themed-only(dark) {
+    background: tget("terminal-color");
+  }
+  @include themed-only(default) {
+    background: tget("color-text");
+  }
 }
 
 .to-top > svg {
@@ -817,13 +830,16 @@ $output-header-sticky-offset: 20px;
 
 <style lang="scss">
 @import "../assets/styles/variables";
+@import "../assets/styles/mixins";
 
 .stage-container > a {
   &:hover,
   &:focus {
     .stage {
       header {
-        background: rgba($color-text, 0.02);
+        @include themed {
+          background: rgba(tget("color-text"), 0.02);
+        }
       }
 
       &.has-steps {
@@ -842,7 +858,9 @@ $output-header-sticky-offset: 20px;
 .step-container > a:hover,
 .step-container > a:focus {
   outline: none;
-  background-color: rgba($color-text, 0.02);
+  @include themed {
+    background-color: rgba(tget("color-text"), 0.02);
+  }
 }
 
 // prettier-ignore
diff --git a/src/views/Builds.vue b/src/views/Builds.vue
index 64703cae..7caba254 100644
--- a/src/views/Builds.vue
+++ b/src/views/Builds.vue
@@ -101,10 +101,13 @@ export default {
 
 <style lang="scss">
 @import "../assets/styles/variables";
+@import "../assets/styles/mixins";
 
 .builds .build .repo-item .header .number,
 .builds .build:hover .repo-item .header {
-  color: $color-primary;
+  @include themed {
+    color: tget("color-primary");
+  }
 }
 </style>
 
@@ -116,7 +119,9 @@ export default {
 }
 
 .empty-message {
-  color: $color-text-secondary;
+  @include themed {
+    color: tget("color-text-secondary");
+  }
 }
 
 .build {
@@ -130,7 +135,13 @@ export default {
 
 .build:hover .repo-item,
 .build:focus .repo-item {
-  box-shadow: 0 4px 10px 0 rgba($color-text, 0.25);
+  @include themed-only(dark) {
+    background: lighten(tget("surface-color"), 3%);
+    box-shadow: 0 4px 10px 0 darken(tget("body-color"), 20%);
+  }
+  @include themed-only(default) {
+    box-shadow: 0 4px 10px 0 rgba(tget("color-text"), 0.25);
+  }
 }
 
 .build + .build {
@@ -139,7 +150,9 @@ export default {
 
 .loading {
   margin: 20px 0;
-  color: $color-text-secondary;
+  @include themed {
+    color: tget("color-text-secondary");
+  }
 }
 
 .more-button {
diff --git a/src/views/Login.vue b/src/views/Login.vue
index ef0fa037..be606939 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -28,6 +28,7 @@ export default {
 
 <style scoped lang="scss">
 @import "../assets/styles/variables";
+@import "../assets/styles/mixins";
 
 div.container {
   align-items: center;
@@ -41,9 +42,11 @@ div.container {
   width: 340px;
   padding: 70px 20px 30px;
   border-radius: 5px;
-  box-shadow: 0 2px 4px 0 $border-color;
-  background-color: #ffffff;
   position: relative;
+  @include themed {
+    background-color: tget("surface-color");
+    box-shadow: 0 2px 4px 0 tget("border-color");
+  }
 }
 
 .logo {
diff --git a/src/views/Logout.vue b/src/views/Logout.vue
index 9a759442..5ffe039b 100644
--- a/src/views/Logout.vue
+++ b/src/views/Logout.vue
@@ -6,25 +6,38 @@
   </div>
 </template>
 
-<style scoped>
+<style scoped lang="scss">
+@import "../assets/styles/mixins";
+
 div.container {
   align-items: center;
-  background: #fbfbfb;
   box-sizing: border-box;
   display: flex;
   justify-content: center;
   padding: 30px;
   height: 100%;
   width: 100%;
+
+  @include themed {
+    background: tget("body-color");
+  }
 }
 
 .logout {
   width: 300px;
-
-  background: #fff;
-  border: 1px solid #e8eaed;
   border-radius: 3px;
-  box-shadow: 0px 0px 8px 1px #e8eaed;
   padding: 30px;
+
+  @include themed {
+    background: tget("surface-color");
+  }
+  @include themed-only(default) {
+    border: 1px solid #e8eaed;
+    box-shadow: 0px 0px 8px 1px #e8eaed;
+  }
+  @include themed-only(dark) {
+    border: 1px solid tget("border-color");
+    box-shadow: 0px 0px 8px 1px darken(tget("body-color"), 20%);
+  }
 }
 </style>
diff --git a/src/views/Repo.vue b/src/views/Repo.vue
index c179ae66..a3c2e8fe 100644
--- a/src/views/Repo.vue
+++ b/src/views/Repo.vue
@@ -193,10 +193,12 @@ h1 {
 }
 
 nav {
-  border-bottom: 1px solid $border-color;
   margin-bottom: 20px;
   padding-left: 15px;
   display: flex;
+  @include themed {
+    border-bottom: 1px solid tget("border-color");
+  }
 
   svg {
     opacity: 0.6;
@@ -210,7 +212,6 @@ nav {
 }
 
 nav a {
-  color: $color-text-secondary;
   height: 18px;
   line-height: 18px;
   padding-bottom: 11px;
@@ -222,6 +223,9 @@ nav a {
   align-items: center;
   margin-right: 30px;
   border-bottom: 1px solid transparent;
+  @include themed {
+    color: tget("color-text-secondary");
+  }
 
   @include mobile {
     letter-spacing: normal;
@@ -231,12 +235,16 @@ nav a {
 }
 
 nav a.manually-active {
-  color: $color-text;
+  @include themed {
+    color: tget("color-text");
+  }
 }
 
 nav a:hover,
 nav a:focus {
-  color: $color-text;
+  @include themed {
+    color: tget("color-text");
+  }
 
   svg {
     opacity: 1;
@@ -245,14 +253,18 @@ nav a:focus {
 
 nav a.manually-active:focus,
 nav a.manually-active:hover {
-  color: $color-primary;
+  @include themed {
+    color: tget("color-primary");
+  }
 }
 
 nav a[disabled],
 nav a[disabled]:hover,
 nav a[disabled]:focus {
   pointer-events: none;
-  color: rgba($color-text, 0.25);
+  @include themed {
+    color: rgba(tget("color-text"), 0.25);
+  }
 }
 
 nav a svg {
@@ -260,8 +272,10 @@ nav a svg {
 }
 
 nav .router-link-exact-active {
-  border-color: $color-text;
-  color: $color-text;
+  @include themed {
+    border-color: tget("color-text");
+    color: tget("color-text");
+  }
 }
 
 .fade-enter-active,
@@ -290,7 +304,9 @@ nav .router-link-exact-active {
   max-width: 300px;
   line-height: 18px;
   display: block;
-  color: #2364d2;
   margin: 0px auto;
+  @include themed {
+    color: tget("color-primary");
+  }
 }
 </style>
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
index bbb0e8b4..b830aaab 100644
--- a/src/views/Settings.vue
+++ b/src/views/Settings.vue
@@ -199,7 +199,6 @@ const timeouts = [15, 30, 60, 90, 120, 180, 240, 300, 360, 420, 480, 540, 600, 6
 
 <style scoped lang="scss">
 @import "../assets/styles/mixins";
-@import "../assets/styles/mixins";
 
 .control-group {
   .controls {
@@ -246,7 +245,9 @@ const timeouts = [15, 30, 60, 90, 120, 180, 240, 300, 360, 420, 480, 540, 600, 6
 
 .disable span {
   margin: 15px 0 0 15px;
-  color: $color-text-secondary;
+  @include themed {
+    color: tget("color-text-secondary");
+  }
 
   @include mobile {
     display: block;

From dabbacbf5b468b27d8025e3e619b9b037bbe7df3 Mon Sep 17 00:00:00 2001
From: pirsquareff <parinthorn.sa@gmail.com>
Date: Wed, 1 Jan 2020 19:53:19 +0700
Subject: [PATCH 3/8] Apply a theme based on a value saved in a local storage

---
 src/App.vue      | 10 ++++++++++
 src/lib/theme.js | 28 ++++++++++++++++++++++++++++
 2 files changed, 38 insertions(+)
 create mode 100644 src/lib/theme.js

diff --git a/src/App.vue b/src/App.vue
index 80c94c8b..ed999d72 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,6 +2,16 @@
   <router-view />
 </template>
 
+<script>
+import { applySavedTheme } from "@/lib/theme";
+
+export default {
+  mounted() {
+    applySavedTheme();
+  }
+};
+</script>
+
 <style lang="scss">
 @import "./assets/styles/reset.scss";
 @import "./assets/styles/global.scss";
diff --git a/src/lib/theme.js b/src/lib/theme.js
new file mode 100644
index 00000000..19fa2ee5
--- /dev/null
+++ b/src/lib/theme.js
@@ -0,0 +1,28 @@
+const localStorageKey = "theme";
+export const THEME = Object.freeze({ DEFAULT: "DEFAULT", DARK: "DARK" });
+
+export function fetchSavedTheme() {
+  return localStorage.getItem(localStorageKey) || undefined;
+}
+
+export function applyDarkTheme(enabled) {
+  const body = document.body;
+  body.classList.add("no-transition");
+
+  if (enabled) {
+    localStorage.setItem(localStorageKey, THEME.DARK);
+    body.classList.remove("theme--default");
+    body.classList.add("theme--dark");
+  } else {
+    localStorage.setItem(localStorageKey, THEME.DEFAULT);
+    body.classList.remove("theme--dark");
+    body.classList.add("theme--default");
+  }
+
+  body.offsetHeight; // Trigger a reflow, flushing the CSS changes
+  body.classList.remove("no-transition");
+}
+
+export function applySavedTheme() {
+  applyDarkTheme(fetchSavedTheme() === THEME.DARK);
+}

From 6376a199c7f2185a3967d79cb2349eecc2480dd4 Mon Sep 17 00:00:00 2001
From: pirsquareff <parinthorn.sa@gmail.com>
Date: Wed, 1 Jan 2020 20:22:58 +0700
Subject: [PATCH 4/8] Add a dark theme control to UserMenu

---
 src/assets/styles/_variables.scss   |  2 +-
 src/components/DarkThemeControl.vue | 59 ++++++++++++++++++
 src/components/UserMenu.vue         | 14 ++++-
 src/components/UserMenuSection.vue  | 32 ++++++++++
 src/components/forms/BaseSwitch.vue | 92 +++++++++++++++++++++++++++++
 5 files changed, 195 insertions(+), 4 deletions(-)
 create mode 100644 src/components/DarkThemeControl.vue
 create mode 100644 src/components/UserMenuSection.vue
 create mode 100644 src/components/forms/BaseSwitch.vue

diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/_variables.scss
index e5a0dc7b..478d4291 100644
--- a/src/assets/styles/_variables.scss
+++ b/src/assets/styles/_variables.scss
@@ -35,7 +35,7 @@ $color-info: #96a5be;
 $color-info--dark: desaturate($color-info, 20%);
 
 $border-color: rgba($color-text, 0.05);
-$border-color--dark: rgba($color-text--dark, 0.16);
+$border-color--dark: rgba($color-text--dark, 0.08);
 
 $header-color: rgba($color-text, 0.97);
 $header-color--dark: rgb(24, 24, 24);
diff --git a/src/components/DarkThemeControl.vue b/src/components/DarkThemeControl.vue
new file mode 100644
index 00000000..8b3d1f3b
--- /dev/null
+++ b/src/components/DarkThemeControl.vue
@@ -0,0 +1,59 @@
+<template>
+  <UserMenuSection>
+    <div class="left" @click.stop.prevent="">
+      <p>Dark theme</p>
+      <span>Dark theme setting will apply to this browser only</span>
+    </div>
+    <template slot="right">
+      <BaseSwitch v-model="darkThemeEnabled"></BaseSwitch>
+    </template>
+  </UserMenuSection>
+</template>
+
+<script>
+import UserMenuSection from "@/components/UserMenuSection.vue";
+import BaseSwitch from "@/components/forms/BaseSwitch.vue";
+import { THEME, applyDarkTheme, fetchSavedTheme } from "@/lib/theme";
+
+export default {
+  name: "DarkThemeControl",
+  components: {
+    UserMenuSection,
+    BaseSwitch
+  },
+  mounted() {
+    this.darkThemeEnabled = fetchSavedTheme() === THEME.DARK;
+  },
+  data() {
+    return {
+      darkThemeEnabled: true
+    };
+  },
+  watch: {
+    darkThemeEnabled: enabled => applyDarkTheme(enabled)
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import "../assets/styles/mixins";
+
+.left {
+  display: flex;
+  flex-direction: column;
+  white-space: normal;
+  margin-right: 20px;
+  line-height: 20px;
+
+  p {
+    font-weight: bold;
+    margin-bottom: 7px;
+  }
+
+  span {
+    @include themed {
+      color: tget("color-text-secondary");
+    }
+  }
+}
+</style>
diff --git a/src/components/UserMenu.vue b/src/components/UserMenu.vue
index b7a44a96..36e3ef1e 100644
--- a/src/components/UserMenu.vue
+++ b/src/components/UserMenu.vue
@@ -7,6 +7,7 @@
 
     <Popup :position="'bottom'" :align="'right'" :evict="!this.opened">
       <router-link to="/account" @focus.native="open" @blur.native="closeDelayed">User settings</router-link>
+      <DarkThemeControl class="section"></DarkThemeControl>
       <a href="/logout" class="logout" @focus="open" @blur="closeDelayed">
         {{ $t("labels.logout") }}
       </a>
@@ -16,11 +17,13 @@
 
 <script>
 import Popup from "@/components/Popup.vue";
+import DarkThemeControl from "@/components/DarkThemeControl.vue";
 
 export default {
   name: "UserMenu",
   components: {
-    Popup
+    Popup,
+    DarkThemeControl
   },
   props: {
     user: Object
@@ -67,12 +70,17 @@ export default {
 }
 
 .popup {
+  min-width: 300px;
   white-space: nowrap;
 }
 
 .popup a {
   display: block;
-  padding: 11px 30px 11px 15px;
+}
+
+.popup a,
+.popup .section {
+  padding: 14px 15px;
   @include themed {
     color: tget("color-text");
   }
@@ -90,7 +98,7 @@ export default {
   }
 }
 
-.popup a + a {
+.popup > *:not(:first-child) {
   @include themed {
     border-top: 1px solid tget("border-color");
   }
diff --git a/src/components/UserMenuSection.vue b/src/components/UserMenuSection.vue
new file mode 100644
index 00000000..648009cc
--- /dev/null
+++ b/src/components/UserMenuSection.vue
@@ -0,0 +1,32 @@
+<template>
+  <div class="user-menu-section">
+    <div>
+      <slot></slot>
+    </div>
+    <div v-if="this.$slots.right" class="right">
+      <slot name="right"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "UserMenuSection"
+};
+</script>
+
+<style scoped lang="scss">
+.user-menu-section {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+
+  div.right {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+}
+</style>
diff --git a/src/components/forms/BaseSwitch.vue b/src/components/forms/BaseSwitch.vue
new file mode 100644
index 00000000..1acd88d4
--- /dev/null
+++ b/src/components/forms/BaseSwitch.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="base-switch">
+    <input
+      type="checkbox"
+      :checked="value"
+      :id="name"
+      @change="$emit('input', $event.target.checked)"
+    />
+    <label :for="name">
+      <slot></slot>
+    </label>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BaseSwitch",
+  props: {
+    name: { type: String, default: () => Math.random().toString() },
+    value: { type: Boolean, required: true }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../assets/styles/variables";
+@import "../../assets/styles/mixins";
+
+.base-switch {
+  $bg-disabled-color: rgba(0, 0, 0, 0.26);
+  $lever-disabled-color: #fff;
+  
+  position: relative;
+
+  input {
+    top: 0;
+    left: 0;
+    width: 36px;
+    height: 18px;
+    opacity: 0;
+    z-index: 0;
+  }
+
+  label {
+    display: block;
+    cursor: pointer;
+
+    &:before {
+      content: "";
+      position: absolute;
+      top: 5px;
+      left: 0;
+      width: 36px;
+      height: 14px;
+      background-color: $bg-disabled-color;
+      border-radius: 14px;
+      z-index: 1;
+      transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    &:after {
+      content: "";
+      position: absolute;
+      top: 2px;
+      left: 0;
+      width: 20px;
+      height: 20px;
+      background-color: $lever-disabled-color;
+      border-radius: 14px;
+      box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
+      z-index: 2;
+      transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+      transition-property: left, background-color;
+    }
+  }
+
+  input:checked + label {
+    &:before {
+      @include themed {
+        background-color: rgba(tget("color-primary"), 0.5);
+      }
+    }
+
+    &:after {
+      left: 16px;
+      @include themed {
+        background-color: tget("color-primary");
+      }
+    }
+  }
+}
+</style>

From 2ddd1e17a0eec2fb693cf21b9f9530d385dbcf2b Mon Sep 17 00:00:00 2001
From: pirsquareff <parinthorn.sa@gmail.com>
Date: Wed, 1 Jan 2020 20:27:59 +0700
Subject: [PATCH 5/8] Apply a dark theme to Modal

---
 src/components/Modal.vue | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index 566423aa..f0c03643 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -38,12 +38,17 @@ export default {
   padding: $header-padding-side;
 }
 .modal-content {
-  box-shadow: 0 2px 4px 0 rgba(25, 45, 70, 0.05);
-  border: solid 1px #edeef1;
   border-radius: 3px;
   min-width: 0;
   @include themed {
+    border: solid 1px tget("border-color");
     background: tget("surface-color");
   }
+  @include themed-only(default) {
+    box-shadow: 0 2px 4px 0 rgba(25, 45, 70, 0.05);
+  }
+  @include themed-only(dark) {
+    box-shadow: 0 2px 4px 0 darken(tget("body-color"), 20%);
+  }
 }
 </style>

From 4c7168f64b8977c90716f53cc2d9435a4a26fabf Mon Sep 17 00:00:00 2001
From: pirsquareff <parinthorn.sa@gmail.com>
Date: Wed, 1 Jan 2020 20:47:24 +0700
Subject: [PATCH 6/8] Apply a dark theme to login pages

---
 src/components/DarkThemeControl.vue |  2 +-
 src/views/Login.vue                 | 10 +++++++++-
 src/views/LoginErr.vue              |  9 +++++++--
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/components/DarkThemeControl.vue b/src/components/DarkThemeControl.vue
index 8b3d1f3b..98952555 100644
--- a/src/components/DarkThemeControl.vue
+++ b/src/components/DarkThemeControl.vue
@@ -2,7 +2,7 @@
   <UserMenuSection>
     <div class="left" @click.stop.prevent="">
       <p>Dark theme</p>
-      <span>Dark theme setting will apply to this browser only</span>
+      <span>Dark theme setting will apply to this browser only.</span>
     </div>
     <template slot="right">
       <BaseSwitch v-model="darkThemeEnabled"></BaseSwitch>
diff --git a/src/views/Login.vue b/src/views/Login.vue
index be606939..fd7b2f85 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -47,6 +47,9 @@ div.container {
     background-color: tget("surface-color");
     box-shadow: 0 2px 4px 0 tget("border-color");
   }
+  @include themed-only(dark) {
+    box-shadow: 0 2px 4px 0 darken(tget("body-color"), 20%);
+  }
 }
 
 .logo {
@@ -54,11 +57,16 @@ div.container {
   padding: 16px;
   margin-bottom: 30px;
   position: absolute;
-  background: #fbfbfb;
   top: -41px;
   left: 50%;
   margin-left: -41px;
   border-radius: 50%;
+  @include themed-only(default) {
+    background: #fbfbfb;
+  }
+  @include themed-only(dark) {
+    background: #000;
+  }
 }
 
 .logo > svg {
diff --git a/src/views/LoginErr.vue b/src/views/LoginErr.vue
index 59400cd1..d8bddf4f 100644
--- a/src/views/LoginErr.vue
+++ b/src/views/LoginErr.vue
@@ -22,16 +22,21 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+@import "../assets/styles/mixins";
+
 div.container {
   align-items: center;
-  background: #fbfbfb;
   box-sizing: border-box;
   display: flex;
   justify-content: center;
   padding: 30px;
   height: 100%;
   width: 100%;
+
+  @include themed {
+    background: tget("body-color");
+  }
 }
 
 div.container > div {

From 8fda17fc15611b2e14657addbd8472fd0779fa8b Mon Sep 17 00:00:00 2001
From: pirsquareff <parinthorn.sa@gmail.com>
Date: Thu, 2 Jan 2020 17:23:29 +0700
Subject: [PATCH 7/8] Run a linter

---
 src/components/Breadcrumb.vue       | 1 -
 src/components/BuildsFeedPanel.vue  | 1 -
 src/components/Help.vue             | 2 +-
 src/components/SystemAlert.vue      | 2 +-
 src/components/UserMenuSection.vue  | 1 -
 src/components/forms/BaseInput.vue  | 3 ++-
 src/components/forms/BaseSwitch.vue | 2 +-
 src/store.js                        | 2 +-
 src/views/Build.vue                 | 3 +--
 src/views/Repo.vue                  | 2 +-
 10 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/components/Breadcrumb.vue b/src/components/Breadcrumb.vue
index fc338463..5f9d0340 100644
--- a/src/components/Breadcrumb.vue
+++ b/src/components/Breadcrumb.vue
@@ -46,7 +46,6 @@ export default {
 @import "../assets/styles/variables";
 @import "../assets/styles/mixins";
 
-
 .breadcrumbs {
   padding: 5px 0;
   max-width: 100%;
diff --git a/src/components/BuildsFeedPanel.vue b/src/components/BuildsFeedPanel.vue
index fb15231f..bf46a8c5 100644
--- a/src/components/BuildsFeedPanel.vue
+++ b/src/components/BuildsFeedPanel.vue
@@ -50,7 +50,6 @@ export default {
 @import "../assets/styles/variables";
 @import "../assets/styles/mixins";
 
-
 .builds-feed-panel {
   .page-header {
     padding: 0 ($header-padding-side - 5px) 0 $header-padding-side;
diff --git a/src/components/Help.vue b/src/components/Help.vue
index 38dd795d..84f9651d 100644
--- a/src/components/Help.vue
+++ b/src/components/Help.vue
@@ -57,7 +57,7 @@ export default {
   user-select: none;
   @include themed {
     color: tget("surface-color");
-    
+
     @include hf {
       background: rgba(tget("color-text"), 0.6);
     }
diff --git a/src/components/SystemAlert.vue b/src/components/SystemAlert.vue
index a88e4243..633378f5 100644
--- a/src/components/SystemAlert.vue
+++ b/src/components/SystemAlert.vue
@@ -26,7 +26,7 @@ footer {
 }
 
 footer a {
-  background: rgba(255,255,255,0.15);
+  background: rgba(255, 255, 255, 0.15);
   border-radius: 3px;
   color: #ffffff;
   margin-left: 20px;
diff --git a/src/components/UserMenuSection.vue b/src/components/UserMenuSection.vue
index 648009cc..19d4fb1c 100644
--- a/src/components/UserMenuSection.vue
+++ b/src/components/UserMenuSection.vue
@@ -10,7 +10,6 @@
 </template>
 
 <script>
-
 export default {
   name: "UserMenuSection"
 };
diff --git a/src/components/forms/BaseInput.vue b/src/components/forms/BaseInput.vue
index b3c9d4f8..4a934e71 100644
--- a/src/components/forms/BaseInput.vue
+++ b/src/components/forms/BaseInput.vue
@@ -29,7 +29,8 @@ input {
   }
 }
 
-input[type="search"], input[type=text] {
+input[type="search"],
+input[type="text"] {
   appearance: none;
 }
 
diff --git a/src/components/forms/BaseSwitch.vue b/src/components/forms/BaseSwitch.vue
index 1acd88d4..3d1a8e7b 100644
--- a/src/components/forms/BaseSwitch.vue
+++ b/src/components/forms/BaseSwitch.vue
@@ -29,7 +29,7 @@ export default {
 .base-switch {
   $bg-disabled-color: rgba(0, 0, 0, 0.26);
   $lever-disabled-color: #fff;
-  
+
   position: relative;
 
   input {
diff --git a/src/store.js b/src/store.js
index 1daf70dc..7ef7cf6c 100644
--- a/src/store.js
+++ b/src/store.js
@@ -492,7 +492,7 @@ export default new Vuex.Store({
         insertBuildCollection(state.builds[slug].data, slug, build);
       }
 
-      updateBuildsFeedByBuild(state, build)
+      updateBuildsFeedByBuild(state, build);
     },
 
     BUILDS_FEED_LOADING(state) {
diff --git a/src/views/Build.vue b/src/views/Build.vue
index 5c18c8b6..c1cfef70 100644
--- a/src/views/Build.vue
+++ b/src/views/Build.vue
@@ -259,8 +259,7 @@ export default {
       return this.buildCollection.data;
     },
     link() {
-      return this.build && this.repo &&
-        `/link/${this.repo.slug}/tree/${this.build.ref}?sha=${this.build.after}`
+      return this.build && this.repo && `/link/${this.repo.slug}/tree/${this.build.ref}?sha=${this.build.after}`;
     },
     buildShowState() {
       if (this.buildCollection.lStatus === "error") return "loadingError";
diff --git a/src/views/Repo.vue b/src/views/Repo.vue
index a3c2e8fe..184778d5 100644
--- a/src/views/Repo.vue
+++ b/src/views/Repo.vue
@@ -133,7 +133,7 @@ export default {
       return (this.repo && this.repo.permissions && this.repo.permissions.write) || (this.user && this.user.admin);
     },
     isAdmin() {
-      return (this.repo && this.repo.permissions && this.repo.permissions.admin);
+      return this.repo && this.repo.permissions && this.repo.permissions.admin;
     },
     build() {
       const collection = this.$store.state.builds[this.slug];

From 3c8c9de1442ee5d5c8cd328db9b4283e00d087b1 Mon Sep 17 00:00:00 2001
From: pirsquareff <parinthorn.sa@gmail.com>
Date: Thu, 2 Jan 2020 17:44:07 +0700
Subject: [PATCH 8/8] Make sure all color variables are themed properly

---
 src/components/Card.vue        | 2 +-
 src/components/Header.vue      | 6 ++++--
 src/components/RepoItem.vue    | 2 +-
 src/components/ReposPopup.vue  | 8 ++++++--
 src/components/Stage.vue       | 6 ++++++
 src/components/Status.vue      | 4 +++-
 src/components/SystemAlert.vue | 5 ++++-
 7 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/src/components/Card.vue b/src/components/Card.vue
index a2c88f3e..bd4fb274 100644
--- a/src/components/Card.vue
+++ b/src/components/Card.vue
@@ -52,9 +52,9 @@ header {
 }
 
 footer {
-  border-top: 1px solid $border-color;
   padding: 15px;
   @include themed {
+    border-top: 1px solid tget("border-color");
     background-color: rgba(tget("color-text"), 0.02);
   }
 }
diff --git a/src/components/Header.vue b/src/components/Header.vue
index 7a659278..1b42c980 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -226,8 +226,10 @@ export default {
   background-color: rgba(255, 255, 255, 0.1);
 
   @include hf {
-    background-color: #fff;
-    color: $body-color;
+    @include themed {
+      background-color: tget("surface-color");
+      color: tget("body-color");
+    }
   }
 
   &:hover {
diff --git a/src/components/RepoItem.vue b/src/components/RepoItem.vue
index b320497a..74cb6e88 100644
--- a/src/components/RepoItem.vue
+++ b/src/components/RepoItem.vue
@@ -116,8 +116,8 @@ export default {
 .repo-item {
   border-radius: 4px;
   box-sizing: border-box;
-  border: solid 1px $border-color;
   padding: 15px;
+  border: solid 1px $border-color;
   transition: box-shadow linear 0.2s, background linear 0.2s;
   @include themed {
     color: tget("color-text");
diff --git a/src/components/ReposPopup.vue b/src/components/ReposPopup.vue
index 91710921..06086ca4 100644
--- a/src/components/ReposPopup.vue
+++ b/src/components/ReposPopup.vue
@@ -104,11 +104,15 @@ export default {
 }
 
 .repo-link.selected {
-  background: $step-selected-bg-color;
+  @include themed {
+    background: tget("step-selected-bg-color");
+  }
 }
 
 .repo-link.selected .repo-item {
-  background: none;
+  @include themed {
+    background: none;
+  }
 }
 
 .repo-link + .repo-link {
diff --git a/src/components/Stage.vue b/src/components/Stage.vue
index f32b8926..01b023a9 100644
--- a/src/components/Stage.vue
+++ b/src/components/Stage.vue
@@ -56,6 +56,12 @@ export default {
     box-shadow: 0 2px 4px 0 rgba(tget("color-text"), 0.1);
     border: 1px solid rgba(tget("color-text"), 0.1);
   }
+  @include themed-only(default) {
+    box-shadow: 0 2px 4px 0 rgba(tget("color-text"), 0.1);
+  }
+  @include themed-only(dark) {
+    box-shadow: 0 2px 4px 0 darken(tget("body-color"), 20%);
+  }
 
   &.has-content header {
     @include themed {
diff --git a/src/components/Status.vue b/src/components/Status.vue
index 1b0a5bc3..9f78357c 100644
--- a/src/components/Status.vue
+++ b/src/components/Status.vue
@@ -124,8 +124,10 @@ svg {
 }
 
 .status-running {
-  color: $color-warning;
   background-color: transparent;
+  @include themed {
+    color: tget("color-warning");
+  }
 
   > svg {
     animation: spin 3.3333s linear infinite;
diff --git a/src/components/SystemAlert.vue b/src/components/SystemAlert.vue
index 633378f5..1eb5ec50 100644
--- a/src/components/SystemAlert.vue
+++ b/src/components/SystemAlert.vue
@@ -4,9 +4,9 @@
 
 <style scoped lang="scss">
 @import "../assets/styles/variables";
+@import "../assets/styles/mixins";
 
 footer {
-  box-shadow: 0 -2px 6px 0px $border-color;
   position: fixed;
   bottom: 0px;
   left: 0px;
@@ -23,6 +23,9 @@ footer {
   justify-content: center;
   text-transform: uppercase;
   align-items: center;
+  @include themed {
+    box-shadow: 0 -2px 6px 0px tget("border-color");
+  }
 }
 
 footer a {