diff --git a/src/scss/base.scss b/src/scss/base.scss
index dcce2196ae..aa6121f30a 100644
--- a/src/scss/base.scss
+++ b/src/scss/base.scss
@@ -8,16 +8,24 @@
 
 html, body {
     height: 100%;
-    background-color: $background-color-alt2;
     font-family: $font-family-sans-serif;
     font-size: $font-size-base;
-    color: $text-color;
     line-height: $line-height-base;
 }
 
+body {
+    @include themify($themes) {
+        color: themed('textColor');
+        background-color: themed('backgroundColorAlt2');
+    }
+}
+
 h1, h2, h3, h4, h5, h6 {
     font-family: $font-family-sans-serif;
-    color: $text-color;
+    
+    @include themify($themes) {
+        color: themed('textColor');
+    }
 }
 
 p {
@@ -36,13 +44,22 @@ a {
     color: $brand-primary;
     text-decoration: none;
 
+    @include themify($themes) {
+        color: themed('primaryColor');
+    }
+
     &:hover, &:focus {
-        color: darken($brand-primary, 6%);
+        @include themify($themes) {
+            color: darken(themed('primaryColor'), 6%);
+        }
     }
 }
 
 input, select, textarea {
-    color: $text-color;
+    @include themify($themes) {
+        color: themed('textColor');
+        background-color: themed('inputBackgroundColor');
+    }
 }
 
 input, select, textarea, button {
diff --git a/src/scss/box.scss b/src/scss/box.scss
index 52e736c4ca..0009815280 100644
--- a/src/scss/box.scss
+++ b/src/scss/box.scss
@@ -5,21 +5,26 @@
 
     .box-header {
         margin: 0 10px 5px 10px;
-        color: $gray-light;
         text-transform: uppercase;
 
+        @include themify($themes) {
+            color: themed('headingColor');
+        }
+
         button {
             background-color: transparent;
             border: none;
-            color: $gray-light;
             text-transform: uppercase;
+
+            @include themify($themes) {
+                color: themed('headingColor');
+            }
         }
     }
 
     .box-content {
         border-radius: $border-radius;
         box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
-        background-color: $box-background-color;
 
         @include themify($themes) {
             background-color: themed('boxBackgroundColor');
@@ -42,7 +47,7 @@
                 bottom: 0;
                 height: 1px;
                 width: calc(100% - 10px);
-                border-bottom: 1px solid $box-border-color;
+                border-bottom: 1px solid #000000;
 
                 @include themify($themes) {
                     border-bottom-color: themed('boxBorderColor');
@@ -67,8 +72,6 @@
             }
 
             &:hover, &:focus, &.active {
-                background-color: $box-background-hover-color;
-
                 @include themify($themes) {
                     background-color: themed('boxBackgroundHoverColor');
                 }
@@ -81,20 +84,29 @@
 
             .row-label, label {
                 font-size: $font-size-small;
-                color: $text-muted;
                 display: block;
                 width: 100%;
                 margin-bottom: 5px;
+
+                @include themify($themes) {
+                    color: themed('mutedColor');
+                }
             }
 
             .text, .detail {
                 display: block;
-                color: $text-color;
+
+                @include themify($themes) {
+                    color: themed('textColor');
+                }
             }
 
             .detail {
                 font-size: $font-size-small;
-                color: $text-muted;
+                
+                @include themify($themes) {
+                    color: themed('mutedColor');
+                }
             }
 
             .img-right {
@@ -126,22 +138,30 @@
 
                 > a {
                     padding: 8px 8px 8px 4px;
-                    color: $brand-danger;
                     margin: 0;
+                
+                    @include themify($themes) {
+                        color: themed('dangerColor');
+                    }
                 }
             }
 
             &.box-content-row-checkbox, &.box-content-row-input, &.box-content-row-slider {
                 label, .row-label {
                     font-size: $font-size-base;
-                    color: $text-color;
                     display: inline;
                     width: initial;
                     margin-bottom: 0;
+                
+                    @include themify($themes) {
+                        color: themed('textColor');
+                    }
                 }
 
                 > span {
-                    color: $text-muted;
+                    @include themify($themes) {
+                        color: themed('mutedColor');
+                    }
                 }
 
                 > input {
@@ -188,7 +208,9 @@
                 background-color: transparent;
 
                 &::-webkit-input-placeholder {
-                    color: lighten($gray-light, 35%);
+                    @include themify($themes) {
+                        color: themed('inputPlaceholderColor');
+                    }
                 }
 
                 &:focus {
@@ -198,8 +220,11 @@
 
             select {
                 width: 100%;
-                border: 1px solid darken($border-color-dark, 7%);
+                border: 1px solid #000000;
                 border-radius: $border-radius;
+                @include themify($themes) {
+                    border-color: themed('inputBorderColor');
+                }
             }
 
             .action-buttons {
@@ -211,17 +236,25 @@
                     padding: 10px 8px;
                     background: none;
                     border: none;
-                    color: $brand-primary;
+                    @include themify($themes) {
+                        color: themed('boxRowButtonColor');
+                    }
 
                     &:hover, &:focus {
-                        color: darken($brand-primary, 10%);
+                        @include themify($themes) {
+                            color: themed('boxRowButtonHoverColor');
+                        }
                     }
 
                     &.disabled {
-                        color: $list-icon-color;
+                        @include themify($themes) {
+                            color: themed('disabledIconColor');
+                        }
 
                         &:hover {
-                            color: $list-icon-color;
+                            @include themify($themes) {
+                                color: themed('disabledIconColor');
+                            }
                         }
                     }
 
@@ -242,13 +275,18 @@
             }
 
             .row-sub-icon {
-                color: $list-icon-color;
+                @include themify($themes) {
+                    color: themed('disabledIconColor');
+                }
             }
 
             .row-sub-label {
                 margin: 0 15px;
-                color: $gray-light;
                 white-space: nowrap;
+                
+                @include themify($themes) {
+                    color: themed('mutedColor');
+                }
             }
         }
 
@@ -267,6 +305,9 @@
     .box-footer {
         margin: 5px 10px;
         font-size: $font-size-small;
-        color: $text-muted;
+
+        @include themify($themes) {
+            color: themed('mutedColor');
+        }
     }
 }
diff --git a/src/scss/buttons.scss b/src/scss/buttons.scss
index 1aadad7c10..007e21aae7 100644
--- a/src/scss/buttons.scss
+++ b/src/scss/buttons.scss
@@ -1,44 +1,62 @@
 @import "variables.scss";
 
 .btn, #vault .footer button, .modal-footer button {
-    background-color: $button-backgound-color;
     border-radius: $border-radius;
     padding: 7px 15px;
-    border: 1px solid $button-border-color;
+    border: 1px solid #000000;
     font-size: $font-size-base;
-    color: $button-color;
     white-space: nowrap;
     text-align: center;
     cursor: pointer;
 
+    @include themify($themes) {
+        background-color: themed('buttonBackgroundColor');
+        border-color: themed('buttonBorderColor');
+        color: themed('buttonColor');
+    }
+
     &.primary {
-        color: $button-color-primary;
+        @include themify($themes) {
+            color: themed('buttonPrimaryColor');
+        }
     }
 
     &.danger {
-        color: $button-color-danger;
+        @include themify($themes) {
+            color: themed('buttonDangerColor');
+        }
     }
 
     &:hover:not([disabled]) {
         cursor: pointer;
-        background-color: darken($button-backgound-color, 1.5%);
-        border-color: darken($button-border-color, 17%);
-        color: darken($button-color, 10%);
+
+        @include themify($themes) {
+            background-color: darken(themed('buttonBackgroundColor'), 1.5%);
+            border-color: darken(themed('buttonBorderColor'), 17%);
+            color: darken(themed('buttonColor'), 10%);
+        }
 
         &.primary {
-            color: darken($button-color-primary, 6%);
+            @include themify($themes) {
+                color: darken(themed('buttonPrimaryColor'), 6%);
+            }
         }
 
         &.danger {
-            color: darken($button-color-danger, 6%);
+            @include themify($themes) {
+                color: darken(themed('buttonDangerColor'), 6%);
+            }
         }
     }
 
     &:focus:not([disabled]) {
         cursor: pointer;
-        background-color: darken($button-backgound-color, 6%);
-        border-color: darken($button-border-color, 25%);
         outline: 0;
+
+        @include themify($themes) {
+            background-color: darken(themed('buttonBackgroundColor'), 6%);
+            border-color: darken(themed('buttonBorderColor'), 25%);
+        }
     }
 
     &[disabled] {
diff --git a/src/scss/environment.scss b/src/scss/environment.scss
index 95ce9ffa04..bd68454000 100644
--- a/src/scss/environment.scss
+++ b/src/scss/environment.scss
@@ -2,6 +2,10 @@
 
 html.os_windows {
     body {
-        border-top: 1px solid $border-color-dark;
+        border-top: 1px solid #000000;
+
+        @include themify($themes) {
+            border-top-color: themed('borderColorDark');
+        }
     }
 }
diff --git a/src/scss/list.scss b/src/scss/list.scss
index a0e1becf69..4d4b6b6d73 100644
--- a/src/scss/list.scss
+++ b/src/scss/list.scss
@@ -3,12 +3,15 @@
 .list > a {
     display: block;
     padding: 3px 10px;
-    background-color: white;
     text-decoration: none;
-    color: $text-color;
     position: relative;
     z-index: 1;
 
+    @include themify($themes) {
+        color: themed('textColor');
+        background-color: themed('listItemBackgroundColor');
+    }
+
     &:after {
         content: "";
         display: table;
@@ -22,7 +25,11 @@
         bottom: 0;
         height: 1px;
         width: calc(100% - 10px);
-        border-bottom: 1px solid $border-color;
+        border-bottom: 1px solid #000000;
+
+        @include themify($themes) {
+            border-bottom-color: themed('borderColor');
+        }
     }
 
     &:last-child:before {
@@ -31,17 +38,27 @@
     }
 
     &:hover, &:focus, &.active {
-        background-color: $list-item-hover;
+        @include themify($themes) {
+            background-color: themed('listItemBackgroundHoverColor');
+        }
     }
 
     &.active {
-        border-left: 5px solid $brand-primary;
+        border-left: 5px solid #000000;
         padding-left: 5px;
+
+        @include themify($themes) {
+            border-left-color: themed('primaryColor');
+        }
     }
 
     &:focus:not(.active) {
-        border-left: 5px solid $text-muted;
+        border-left: 5px solid #000000;
         padding-left: 5px;
+
+        @include themify($themes) {
+            border-left-color: themed('mutedColor');
+        }
     }
 
     .text, .detail {
@@ -49,12 +66,18 @@
         overflow: hidden;
         text-overflow: ellipsis;
         display: block;
-        color: $text-color;
+
+        @include themify($themes) {
+            color: themed('textColor');
+        }
     }
 
     .detail {
         font-size: $font-size-small;
-        color: $gray-light;
+
+        @include themify($themes) {
+            color: themed('mutedColor');
+        }
     }
 
     .icon {
@@ -65,7 +88,10 @@
         height: 36px;
         width: 34px;
         margin-left: -5px;
-        color: $text-muted;
+        
+        @include themify($themes) {
+            color: themed('mutedColor');
+        }
 
         img {
             border-radius: $border-radius;
diff --git a/src/scss/misc.scss b/src/scss/misc.scss
index 57f9454af5..ee12efe6ef 100644
--- a/src/scss/misc.scss
+++ b/src/scss/misc.scss
@@ -5,19 +5,27 @@ small {
 }
 
 .text-primary {
-    color: $brand-primary !important;
+    @include themify($themes) {
+        color: themed('primaryColor') !important;
+    }
 }
 
 .text-success {
-    color: $brand-success !important;
+    @include themify($themes) {
+        color: themed('successColor') !important;
+    }
 }
 
 .text-muted {
-    color: $text-muted !important;
+    @include themify($themes) {
+        color: themed('mutedColor') !important;
+    }
 }
 
 .text-default {
-    color: $text-color !important;
+    @include themify($themes) {
+        color: themed('textColor') !important;
+    }
 }
 
 .text-center {
@@ -79,9 +87,12 @@ p.lead {
         }
 
         .totp-circle {
-            stroke: $brand-primary;
             fill: none;
 
+            @include themify($themes) {
+                stroke: themed('totpStrokeColor');
+            }
+
             &.inner {
                 stroke-width: 3;
                 stroke-dasharray: 78.6;
@@ -98,11 +109,15 @@ p.lead {
 
     &.low {
         .totp-sec, .totp-code {
-            color: $brand-danger;
+            @include themify($themes) {
+                color: themed('dangerColor');
+            }
         }
 
         .totp-circle {
-            stroke: $brand-danger;
+            @include themify($themes) {
+                stroke: themed('dangerColor');
+            }
         }
     }
 }
@@ -148,9 +163,13 @@ form, .form {
         }
 
         input, select, textarea {
-            border: 1px solid darken($border-color-dark, 7%);
+            border: 1px solid #000000;
             border-radius: $border-radius;
             display: block;
+
+            @include themify($themes) {
+                border-color: themed('inputBorderColor');
+            }
         }
     }
 
@@ -172,8 +191,11 @@ form, .form {
 
     .help-block {
         margin-top: 3px;
-        color: $text-muted;
         display: block;
+
+        @include themify($themes) {
+            color: themed('mutedColor');
+        }
     }
 }
 
@@ -184,5 +206,8 @@ app-root > #loading {
     align-items: center;
     height: 100%;
     width: 100%;
-    color: $text-muted;
+
+    @include themify($themes) {
+        color: themed('mutedColor');
+    }
 }
diff --git a/src/scss/modal.scss b/src/scss/modal.scss
index fe418945ee..867f4668b2 100644
--- a/src/scss/modal.scss
+++ b/src/scss/modal.scss
@@ -20,7 +20,7 @@ $modal-dialog-margin-y-sm-up: 1.75rem !default;
 
 $modal-title-line-height: $line-height-base !default;
 
-$modal-content-bg: $background-color-alt !default;
+//$modal-content-bg: $background-color-alt !default;
 $modal-content-border-color: rgba($black, .2) !default;
 $modal-content-border-width: 1px !default;
 $modal-content-box-shadow-xs: none;
@@ -157,7 +157,7 @@ $close-text-shadow: 0 1px 0 $white !default;
     width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
     // counteract the pointer-events: none; in the .modal-dialog
     pointer-events: auto;
-    background-color: $modal-content-bg;
+    //background-color: $modal-content-bg;
     background-clip: padding-box;
     border: $modal-content-border-width solid $modal-content-border-color;
     //@include border-radius($border-radius-lg);
@@ -166,6 +166,10 @@ $close-text-shadow: 0 1px 0 $white !default;
     box-shadow: $modal-content-box-shadow-xs;
     // Remove focus outline from opened modal
     outline: 0;
+
+    @include themify($themes) {
+        background-color: themed('backgroundColorAlt');
+    }
 }
 
 // Modal background
@@ -198,6 +202,10 @@ $close-text-shadow: 0 1px 0 $white !default;
     border-bottom: $modal-header-border-width solid $modal-header-border-color;
     //@include border-top-radius($border-radius-lg);
 
+    @include themify($themes) {
+        border-bottom-color: themed('borderColorDark');
+    }
+
     .close {
         padding: $modal-header-padding $modal-inner-padding;
         // auto on the left force icon to the right even when there is no .modal-title
@@ -239,6 +247,11 @@ $close-text-shadow: 0 1px 0 $white !default;
     //justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
     padding: $modal-inner-padding;
     border-top: $modal-footer-border-width solid $modal-footer-border-color;
+
+    @include themify($themes) {
+        border-top-color: themed('borderColorDark');
+    }
+
     // Easily place margin between footer elements
     button {
         margin-right: 10px;
diff --git a/src/scss/pages.scss b/src/scss/pages.scss
index aa0663e424..e9a11891d2 100644
--- a/src/scss/pages.scss
+++ b/src/scss/pages.scss
@@ -100,9 +100,12 @@
             }
 
             &:hover, &:focus {
-                color: $brand-primary;
                 text-decoration: none;
 
+                @include themify($themes) {
+                    color: themed('primaryColor');
+                }
+
                 span {
                     visibility: visible;
                 }
diff --git a/src/scss/plugins.scss b/src/scss/plugins.scss
index 820444992e..8248747282 100644
--- a/src/scss/plugins.scss
+++ b/src/scss/plugins.scss
@@ -37,7 +37,10 @@ $fa-font-path: "~font-awesome/fonts";
 
         &.toast-danger, &.toast-error {
             background-image: none !important;
-            background-color: $brand-danger;
+
+            @include themify($themes) {
+                background-color: themed('dangerColor');
+            }
 
             &:before {
                 content: "\f0e7";
@@ -47,7 +50,10 @@ $fa-font-path: "~font-awesome/fonts";
 
         &.toast-warning {
             background-image: none !important;
-            background-color: $brand-warning;
+
+            @include themify($themes) {
+                background-color: themed('warningColor');
+            }
 
             &:before {
                 content: "\f071";
@@ -56,7 +62,10 @@ $fa-font-path: "~font-awesome/fonts";
 
         &.toast-info {
             background-image: none !important;
-            background-color: $brand-info;
+
+            @include themify($themes) {
+                background-color: themed('infoColor');
+            }
 
             &:before {
                 content: "\f05a";
@@ -65,7 +74,10 @@ $fa-font-path: "~font-awesome/fonts";
 
         &.toast-success {
             background-image: none !important;
-            background-color: $brand-success;
+
+            @include themify($themes) {
+                background-color: themed('successColor');
+            }
 
             &:before {
                 content: "\f00C";
diff --git a/src/scss/variables.scss b/src/scss/variables.scss
index 1a07372d5b..5cc6ba04ce 100644
--- a/src/scss/variables.scss
+++ b/src/scss/variables.scss
@@ -31,7 +31,7 @@ $box-background-hover-color: $list-item-hover;
 $box-border-color: $border-color;
 
 $button-border-color: darken($border-color-dark, 12%);
-$button-backgound-color: white;
+$button-background-color: white;
 $button-color: lighten($text-color, 40%);
 $button-color-primary: darken($brand-primary, 8%);
 $button-color-danger: darken($brand-danger, 10%);
@@ -44,20 +44,82 @@ $themes: (
         backgroundColor: $background-color,
         backgroundColorAlt: $background-color-alt,
         backgroundColorAlt2: $background-color-alt2,
+        headerBackgroundColor: $brand-primary,
+        headerInputBackgroundColor: darken($brand-primary, 8%),
+        headerInputBackgroundFocusColor: darken($brand-primary, 10%),
+        headerInputColor: #ffffff,
+        headerInputPlaceholderColor: lighten($brand-primary, 35%),
+        listItemBackgroundColor: $background-color,
+        listItemBackgroundHoverColor: $list-item-hover,
         boxBackgroundColor: $box-background-color,
         boxBackgroundHoverColor: $box-background-hover-color,
         boxBorderColor: $box-border-color,
+        groupingsActiveColor: darken($background-color-alt, 5%),
+        disabledIconColor: $list-icon-color,
+        headingColor: $gray-light,
+        headingButtonColor: lighten($gray-light, 30%),
+        headingButtonHoverColor: $gray-light,
+        labelColor: $gray-light,
+        mutedColor: $text-muted,
+        totpStrokeColor: $brand-primary,
+        boxRowButtonColor: $brand-primary,
+        boxRowButtonHoverColor: darken($brand-primary, 10%),
+        inputBorderColor: darken($border-color-dark, 7%),
+        inputBackgroundColor: #ffffff,
+        inputPlaceholderColor: lighten($gray-light, 35%),
+        buttonBackgroundColor: $button-background-color,
+        buttonBorderColor: $button-border-color,
+        buttonColor: $button-color,
+        buttonPrimaryColor: $button-color-primary,
+        buttonDangerColor: $button-color-danger,
+        primaryColor: $brand-primary,
+        primaryAccentColor: $brand-primary-accent,
+        dangerColor: $brand-danger,
+        successColor: $brand-success,
+        infoColor: $brand-info,
+        warningColor: $brand-warning,
     ),
     dark: (
         textColor: #ffffff,
-        borderColor: #000000,
-        borderColorDark: #000000,
-        backgroundColor: #5f5f5f,
-        backgroundColorAlt: #5f5f5f,
-        backgroundColorAlt2: #5f5f5f,
-        boxBackgroundColor: #5f5f5f,
-        boxBackgroundHoverColor: #707070,
-        boxBorderColor: #000000,
+        borderColor: #2f2f2f,
+        borderColorDark: #2f2f2f,
+        backgroundColor: #363636,
+        backgroundColorAlt: #3d3d3d,
+        backgroundColorAlt2: #222222,
+        boxBackgroundColor: #363636,
+        boxBackgroundHoverColor: #3f3f3f,
+        boxBorderColor: #2f2f2f,
+        headerBackgroundColor: #363636,
+        headerInputBackgroundColor: #222222,
+        headerInputBackgroundFocusColor: #1d1d1d,
+        headerInputColor: #ffffff,
+        headerInputPlaceholderColor: #707070,
+        listItemBackgroundColor: #363636,
+        listItemBackgroundHoverColor: #464646,
+        groupingsActiveColor: #292929,
+        disabledIconColor: #c7c7cd,
+        headingColor: #a3a3a3,
+        headingButtonColor: #a3a3a3,
+        headingButtonHoverColor: #ffffff,
+        labelColor: #a3a3a3,
+        mutedColor: #a3a3a3,
+        totpStrokeColor: #cacaca,
+        boxRowButtonColor: #cacaca,
+        boxRowButtonHoverColor: #ffffff,
+        inputBorderColor: #222222,
+        inputBackgroundColor: #363636,
+        inputPlaceholderColor: #707070,
+        buttonBackgroundColor: #363636,
+        buttonBorderColor: #1f1f1f,
+        buttonColor: #ffffff,
+        buttonPrimaryColor: #52bdfb,
+        buttonDangerColor: #ff3e24,
+        primaryColor: #52bdfb,
+        primaryAccentColor: #3ea1da,
+        dangerColor: #ff3e24,
+        successColor: $brand-success,
+        infoColor: $brand-info,
+        warningColor: $brand-warning,
     ),
 );
 
diff --git a/src/scss/vault.scss b/src/scss/vault.scss
index 73fb2f8af3..3ecb130092 100644
--- a/src/scss/vault.scss
+++ b/src/scss/vault.scss
@@ -17,8 +17,7 @@
         width: 22%;
         min-width: 175px;
         max-width: 250px;
-        background-color: $background-color-alt;
-        border-right: 1px solid $border-color-dark;
+        border-right: 1px solid #000000;
 
         @include themify($themes) {
             background-color: themed('backgroundColorAlt');
@@ -31,22 +30,30 @@
         }
 
         h2 {
-            color: $gray-light;
             text-transform: uppercase;
             font-size: $font-size-base;
             font-weight: normal;
             margin-bottom: 5px;
             display: flex;
 
+            @include themify($themes) {
+                color: themed('headingColor');
+            }
+
             button {
                 margin-left: auto;
                 background: none;
                 border: none;
-                color: lighten($gray-light, 30%);
+                @include themify($themes) {
+                    color: themed('headingButtonColor');
+                }
 
                 &:hover, &:focus {
-                    color: $gray-light;
                     cursor: pointer;
+
+                    @include themify($themes) {
+                        color: themed('headingButtonHoverColor');
+                    }
                 }
             }
         }
@@ -83,17 +90,25 @@
             li {
                 a {
                     padding: 5px 0;
-                    color: $text-color;
                     display: flex;
                     align-items: center;
 
+                    @include themify($themes) {
+                        color: themed('textColor');
+                    }
+
                     span {
                         visibility: hidden;
                         margin-left: auto;
-                        color: lighten($gray-light, 30%);
-
-                        &:hover {
-                            color: $text-muted;
+                        
+                        @include themify($themes) {
+                            color: themed('headingButtonColor');
+                        }
+        
+                        &:hover, &:focus {
+                            @include themify($themes) {
+                                color: themed('headingButtonHoverColor');
+                            }
                         }
                     }
 
@@ -105,11 +120,14 @@
                 }
 
                 &.active {
-                    background-color: darken($background-color-alt, 5%);
                     margin-left: -15px;
                     margin-right: -5px;
                     padding-left: 15px;
                     padding-right: 5px;
+
+                    @include themify($themes) {
+                        background-color: themed('groupingsActiveColor');
+                    }
                 }
             }
         }
@@ -119,8 +137,7 @@
         width: 28%;
         min-width: 200px;
         max-width: 350px;
-        background-color: $background-color;
-        border-right: 1px solid $border-color-dark;
+        border-right: 1px solid #000000;
         
         @include themify($themes) {
             background-color: themed('backgroundColor');
@@ -138,7 +155,10 @@
 
             .fa {
                 margin-bottom: 10px;
-                color: $list-icon-color;
+
+                @include themify($themes) {
+                    color: themed('disabledIconColor');
+                }
             }
         }
     }
@@ -146,8 +166,7 @@
     > #details {
         flex: 1;
         min-width: 0;
-        background-color: $background-color-alt2;
-
+        
         @include themify($themes) {
             background-color: themed('backgroundColorAlt2');
         }
@@ -208,12 +227,16 @@
     .header {
         min-height: 44px;
         max-height: 44px;
-        background-color: $brand-primary;
         flex: 0 0 auto;
-        border-bottom: 1px solid darken($brand-primary, 7%);
+        border-bottom: 1px solid #000000;
         display: flex;
         align-items: center;
 
+        @include themify($themes) {
+            background-color: themed('headerBackgroundColor');
+            border-bottom-color: darken(themed('headerBackgroundColor'), 7%);
+        }
+
         &.header-search {
             .search {
                 padding: 0 7px;
@@ -225,26 +248,37 @@
                     position: absolute;
                     top: 7px;
                     left: 15px;
-                    color: lighten($brand-primary, 30%);
+
+                    @include themify($themes) {
+                        color: themed('headerInputPlaceholderColor');
+                    }
                 }
 
                 input {
                     width: 100%;
                     margin: 0;
-                    background: darken($brand-primary, 8%);
                     border: none;
-                    color: white;
                     padding: 5px 10px 5px 30px;
                     border-radius: $border-radius;
 
+                    @include themify($themes) {
+                        background-color: themed('headerInputBackgroundColor');
+                        color: themed('headerInputColor');
+                    }
+
                     &:focus {
                         border-radius: $border-radius;
                         outline: none;
-                        background: darken($brand-primary, 10%);
+
+                        @include themify($themes) {
+                            background-color: themed('headerInputBackgroundFocusColor');
+                        }
                     }
 
                     &::-webkit-input-placeholder {
-                        color: lighten($brand-primary, 35%);
+                        @include themify($themes) {
+                            color: themed('headerInputPlaceholderColor');
+                        }
                     }
                 }
             }
@@ -260,13 +294,17 @@
 
     .footer {
         height: 50px;
-        background-color: $background-color-alt;
         flex: 0 0 auto;
-        border-top: 1px solid $border-color-dark;
+        border-top: 1px solid #000000;
         display: flex;
         align-items: center;
         padding: 0 15px;
 
+        @include themify($themes) {
+            background-color: themed('backgroundColorAlt');
+            border-top-color: themed('borderColorDark');
+        }
+
         button {
             margin-right: 10px;