diff --git a/src/popup/scss/base.scss b/src/popup/scss/base.scss
index ba6de6fa1d..0f6125897c 100644
--- a/src/popup/scss/base.scss
+++ b/src/popup/scss/base.scss
@@ -120,11 +120,16 @@ content::-webkit-scrollbar-thumb {
 }
 
 header {
-    background-color: $brand-primary;
     min-height: 44px;
     max-height: 44px;
-    color: white;
     display: flex;
+    border-bottom: 1px solid #000000;
+
+    @include themify($themes) {
+        color: themed('headerColor');
+        background-color: themed('headerBackgroundColor');
+        border-bottom-color: themed('headerBorderColor');
+    }
 
     .left, .right {
         flex: 1;
@@ -147,9 +152,7 @@ header {
     }
 
     app-pop-out > button, div > button, div > a {
-        background: $brand-primary;
         border: none;
-        color: white;
         padding: 0 10px;
         text-decoration: none;
         display: flex;
@@ -157,9 +160,16 @@ header {
         justify-content: center;
         align-items: center;
 
+        @include themify($themes) {
+            color: themed('headerColor');
+            background-color: themed('headerBackgroundColor');
+        }
+
         &:hover, &:focus {
-            background-color: rgba(255, 255, 255, 0.1);
-            color: white;
+            @include themify($themes) {
+                background-color: themed('headerBackgroundHoverColor');
+                color: themed('headerColor');
+            }
         }
 
         &:focus {
@@ -198,26 +208,37 @@ header {
             position: absolute;
             top: 15px;
             left: 20px;
-            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');
+                }
             }
         }
     }
@@ -242,14 +263,18 @@ header {
 .tabs {
     width: 100%;
     height: 55px;
-    background-color: white;
-    border-top: 1px solid $border-color-dark;
+    border-top: 1px solid #000000;
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     overflow: hidden;
 
+    @include themify($themes) {
+        background-color: themed('tabBackgroundColor');
+        border-top-color: themed('borderColorDark');
+    }
+
     ul {
         width: 100%;
         list-style: none;
@@ -268,14 +293,19 @@ header {
                 display: block;
                 padding: 7px 0;
                 text-decoration: none;
-                color: $gray-light;
                 font-size: 12px;
                 white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
 
+                @include themify($themes) {
+                    color: themed('mutedColor');
+                }
+
                 &:hover, &:focus {
-                    background-color: $list-item-hover;
+                    @include themify($themes) {
+                        background-color: themed('listItemBackgroundHoverColor');
+                    }
                 }
 
                 i {
@@ -287,7 +317,9 @@ header {
 
             &.active {
                 a {
-                    color: $brand-primary;
+                    @include themify($themes) {
+                        color: themed('primaryColor');
+                    }
                 }
             }
         }
diff --git a/src/popup/scss/box.scss b/src/popup/scss/box.scss
index fe5ee36668..0ac9169a9f 100644
--- a/src/popup/scss/box.scss
+++ b/src/popup/scss/box.scss
@@ -10,15 +10,22 @@
 
     .box-header {
         margin: 0 10px 5px 10px;
-        color: $gray-light;
         text-transform: uppercase;
         display: flex;
+
+        @include themify($themes) {
+            color: themed('headingColor');
+        }
     }
 
     .box-content {
-        background: $box-background-color;
-        border-top: 1px solid $border-color-dark;
-        border-bottom: 1px solid $border-color-dark;
+        border-top: 1px solid #000000;
+        border-bottom: 1px solid #000000;
+
+        @include themify($themes) {
+            background-color: themed('boxBackgroundColor');
+            border-color: themed('borderColorDark');
+        }
 
         &.box-content-padded {
             padding: 10px 15px;
@@ -37,7 +44,11 @@
                 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');
+                }
             }
 
             &:last-child {
@@ -54,7 +65,9 @@
             }
 
             &:hover, &:focus, &.active {
-                background-color: $box-background-hover-color;
+                @include themify($themes) {
+                    background-color: themed('boxBackgroundHoverColor');
+                }
             }
 
             &.pre {
@@ -64,20 +77,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 {
@@ -109,8 +131,11 @@
 
                 > a {
                     padding: 8px 8px 8px 4px;
-                    color: $brand-danger;
                     margin: 0;
+                
+                    @include themify($themes) {
+                        color: themed('dangerColor');
+                    }
                 }
             }
 
@@ -122,14 +147,19 @@
             &.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 {
@@ -176,7 +206,9 @@
                 background-color: transparent;
 
                 &::-webkit-input-placeholder {
-                    color: lighten($gray-light, 35%);
+                    @include themify($themes) {
+                        color: themed('inputPlaceholderColor');
+                    }
                 }
 
                 &:focus {
@@ -186,8 +218,11 @@
 
             select {
                 width: 100%;
-                border: 1px solid darken($border-color-dark, 7%);
                 border-radius: $border-radius;
+                
+                @include themify($themes) {
+                    border-color: themed('inputBorderColor');
+                }
             }
 
             .action-buttons {
@@ -199,17 +234,26 @@
                     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');
+                            }
                         }
                     }
 
@@ -230,13 +274,18 @@
             }
 
             .row-sub-icon, .row-sub-label + i.fa {
-                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');
+                }
             }
 
             .icon {
@@ -246,7 +295,10 @@
                 min-width: 34px;
                 height: 100%;
                 margin-left: -5px;
-                color: $text-muted;
+
+                @include themify($themes) {
+                    color: themed('mutedColor');
+                }
 
                 img {
                     border-radius: $border-radius;
@@ -282,9 +334,12 @@
                     }
 
                     .totp-circle {
-                        stroke: $brand-primary;
                         fill: none;
 
+                        @include themify($themes) {
+                            stroke: themed('totpStrokeColor');
+                        }
+
                         &.inner {
                             stroke-width: 3;
                             stroke-dasharray: 78.6;
@@ -301,11 +356,15 @@
 
                 &.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');
+                        }
                     }
                 }
             }
@@ -326,28 +385,40 @@
     .box-footer {
         margin: 5px 10px;
         font-size: $font-size-small;
-        color: $text-muted;
+
+        @include themify($themes) {
+            color: themed('mutedColor');
+        }
     }
 
     &.list {
         .box-content {
             .box-content-row {
                 padding: 3px 10px;
-                color: $text-color;
                 text-decoration: none;
 
+                @include themify($themes) {
+                    color: themed('textColor');
+                }
+
                 &.padded {
                     padding-top: 10px;
                     padding-bottom: 10px;
                 }
 
                 &:hover, &:focus, &.active {
-                    background-color: $list-item-hover;
+                    @include themify($themes) {
+                        background-color: themed('listItemBackgroundHoverColor');
+                    }
                 }
 
                 &:focus {
-                    border-left: 5px solid $text-muted;
+                    border-left: 5px solid #000000;
                     padding-left: 5px;
+
+                    @include themify($themes) {
+                        border-left-color: themed('mutedColor');
+                    }
                 }
 
                 .action-buttons {
diff --git a/src/popup/scss/plugins.scss b/src/popup/scss/plugins.scss
index fc10a3fcdf..b7bd0dacba 100644
--- a/src/popup/scss/plugins.scss
+++ b/src/popup/scss/plugins.scss
@@ -99,6 +99,11 @@ $fa-font-path: "~font-awesome/fonts";
 .swal-modal {
     border-radius: $border-radius;
 
+    @include themify($themes) {
+        background-color: themed('backgroundColorAlt');
+        color: themed('textColor');
+    }
+
     .swal-icon {
         margin: 15px auto 0 auto;
     }
@@ -129,12 +134,18 @@ $fa-font-path: "~font-awesome/fonts";
         padding: 10px 10px 15px 10px;
         margin: 0;
         font-size: $font-size-large;
-        color: $text-color;
+        
+        @include themify($themes) {
+            color: themed('textColor');
+        }
     }
 
     .swal-text {
-        color: $text-color;
         font-size: $font-size-base;
+
+        @include themify($themes) {
+            color: themed('textColor');
+        }
     }
 
     .swal-footer {
@@ -143,6 +154,10 @@ $fa-font-path: "~font-awesome/fonts";
 
         .swal-button {
             @extend .btn;
+
+            &:focus {
+                box-shadow: none;
+            }
         }
 
         .swal-button--confirm {
diff --git a/src/popup/scss/variables.scss b/src/popup/scss/variables.scss
index 5e9324dfad..8c15b54757 100644
--- a/src/popup/scss/variables.scss
+++ b/src/popup/scss/variables.scss
@@ -39,26 +39,24 @@ $button-color-danger: darken($brand-danger, 10%);
 $themes: (
     light: (
         textColor: $text-color,
-        borderColor: $border-color,
         borderColorDark: $border-color-dark,
         backgroundColor: $background-color,
-        backgroundColorAlt: $background-color-alt,
+        backgroundColorAlt: #ffffff,
+        headerColor: #ffffff,
         headerBackgroundColor: $brand-primary,
-        headerBorderColor: darken($brand-primary, 7%),
+        headerBackgroundHoverColor: rgba(255, 255, 255, 0.1),
+        headerBorderColor: $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%),
+        tabBackgroundColor: #ffffff,
         disabledIconColor: $list-icon-color,
         headingColor: $gray-light,
-        headingButtonColor: lighten($gray-light, 30%),
-        headingButtonHoverColor: $gray-light,
         labelColor: $gray-light,
         mutedColor: $text-muted,
         totpStrokeColor: $brand-primary,
@@ -82,26 +80,24 @@ $themes: (
     ),
     dark: (
         textColor: #ffffff,
-        borderColor: #2f2f2f,
-        borderColorDark: #2f2f2f,
-        backgroundColor: #363636,
+        borderColorDark: #111111,
+        backgroundColor: #222222,
         backgroundColorAlt: #3d3d3d,
         boxBackgroundColor: #363636,
         boxBackgroundHoverColor: #3f3f3f,
         boxBorderColor: #2f2f2f,
+        tabBackgroundColor: #3d3d3d,
+        headerColor: #ffffff,
         headerBackgroundColor: #363636,
-        headerBorderColor: #272727,
+        headerBackgroundHoverColor: #313131,
+        headerBorderColor: #111111,
         headerInputBackgroundColor: #222222,
         headerInputBackgroundFocusColor: #1d1d1d,
         headerInputColor: #ffffff,
         headerInputPlaceholderColor: #707070,
-        listItemBackgroundColor: #363636,
         listItemBackgroundHoverColor: #3c3c3c,
-        groupingsActiveColor: #292929,
         disabledIconColor: #c7c7cd,
         headingColor: #a3a3a3,
-        headingButtonColor: #a3a3a3,
-        headingButtonHoverColor: #ffffff,
         labelColor: #a3a3a3,
         mutedColor: #a3a3a3,
         totpStrokeColor: #cacaca,