start styling for dark theme

src/_locales/en/messages.json

@@ -495,7 +495,7 @@
     "message": "Theme"
   },
   "themeDesc": {
-    "message": "Change the application's color theme. You must re-open the window."
+    "message": "Change the application's color theme."
   },
   "dark": {
     "message": "Dark",

src/popup/accounts/home.component.html

@@ -1,6 +1,6 @@
 <div class="center-content">
     <div class="content">
-        <img src="../images/logo@2x.png" alt="bitwarden" class="img-responsive" />
+        <img alt="Bitwarden" class="img-responsive logo-image" />
         <p class="lead text-center">{{'loginOrCreateNewAccount' | i18n}}</p>
         <a class="btn primary block" routerLink="/login"><b>{{'login' | i18n}}</b></a>
         <a class="btn block" routerLink="/register">{{'createAccount' | i18n}}</a>

src/popup/scss/base.scss

@@ -7,10 +7,8 @@
 }
 
 html, body {
-    background-color: $background-color;
     font-family: $font-family-sans-serif;
     font-size: $font-size-base;
-    color: $text-color;
     line-height: $line-height-base;
     -webkit-font-smoothing: antialiased;
 }
@@ -19,6 +17,13 @@ body {
     width: 375px !important;
     height: 600px !important;
     overflow: hidden;
+    color: $text-color;
+    background-color: $background-color;
+
+    @include themify($themes) {
+        color: themed('textColor');
+        background-color: themed('backgroundColor');
+    }
 
     &.body-sm {
         width: 375px !important;
@@ -38,7 +43,10 @@ body {
 
 h1, h2, h3, h4, h5, h6 {
     font-family: $font-family-sans-serif;
-    color: $text-color;
+    
+    @include themify($themes) {
+        color: themed('textColor');
+    }
 }
 
 p {
@@ -54,16 +62,24 @@ img {
 }
 
 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 {
@@ -293,7 +309,10 @@ content {
     right: 0;
     overflow-y: auto;
     overflow-x: hidden;
-    background-color: $background-color;
+
+    @include themify($themes) {
+        background-color: themed('backgroundColor');
+    }
 
     &.no-header {
         top: 0;
@@ -319,6 +338,9 @@ content {
 
     .fa {
         margin-bottom: 10px;
-        color: $list-icon-color;
+
+        @include themify($themes) {
+            color: themed('disabledIconColor');
+        }
     }
 }

src/popup/scss/buttons.scss

@@ -1,44 +1,62 @@
 @import "variables.scss";
 
 .btn {
-    background-color: $button-background-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-background-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-background-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] {

src/popup/scss/environment.scss

@@ -1,14 +1,5 @@
 @import "variables.scss";
 
-/*
-html.browser_firefox, html.browser_edge {
-    body {
-        width: 320px !important;
-        height: 568px !important;
-    }
-}
-*/
-
 html.browser_safari {
     header { 
         .search .fa {

src/popup/scss/misc.scss

@@ -5,35 +5,45 @@ small, .small {
 }
 
 .text-primary {
-    color: $brand-primary !important;
-}
-
-.text-danger {
-    color: $brand-danger !important;
+    @include themify($themes) {
+        color: themed('primaryColor') !important;
+    }
 }
 
 .text-success {
-    color: $brand-success !important;
-}
-
-.text-info {
-    color: $brand-info !important;
-}
-
-.text-warning {
-    color: $brand-warning !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-accent {
-    color: $brand-primary-accent;
+.text-danger {
+    @include themify($themes) {
+        color: themed('dangerColor') !important;
+    }
+}
+
+.text-info {
+    @include themify($themes) {
+        color: themed('infoColor') !important;
+    }
+}
+
+.text-warning {
+    @include themify($themes) {
+        color: themed('warningColor') !important;
+    }
 }
 
 .text-center {
@@ -126,8 +136,18 @@ app-root > #loading {
     height: 100%;
     width: 100%;
     color: $text-muted;
+
+    @include themify($themes) {
+        color: themed('mutedColor');
+    }
 }
 
 app-vault-icon {
     display: flex;
 }
+
+.logo-image {
+    @include themify($themes) {
+        content: url('../images/logo-' + themed('logoSuffix') + '@2x.png');
+    }
+}

src/popup/scss/pages.scss

@@ -27,7 +27,7 @@ app-home {
     }
 
     img {
-        width: 282px;
+        width: 284px;
         margin: 0 auto;
     }
 
@@ -40,19 +40,25 @@ app-home {
     }
 
     a.settings-icon {
-        color: #bbbbbb;
         position: absolute;
         top: 10px;
         left: 10px;
 
+        @include themify($themes) {
+            color: themed('mutedColor');
+        }
+
         span {
             visibility: hidden;
         }
 
         &:hover {
-            color: $brand-primary;
             text-decoration: none;
 
+            @include themify($themes) {
+                color: themed('primaryColor');
+            }
+
             span {
                 visibility: visible;
             }

src/popup/scss/plugins.scss

@@ -45,7 +45,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";
@@ -55,7 +58,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";
@@ -64,7 +70,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";
@@ -73,7 +82,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";

src/popup/scss/variables.scss

@@ -78,6 +78,7 @@ $themes: (
         successColor: $brand-success,
         infoColor: $brand-info,
         warningColor: $brand-warning,
+        logoSuffix: 'dark',
     ),
     dark: (
         textColor: #ffffff,
@@ -95,7 +96,7 @@ $themes: (
         headerInputColor: #ffffff,
         headerInputPlaceholderColor: #707070,
         listItemBackgroundColor: #363636,
-        listItemBackgroundHoverColor: #464646,
+        listItemBackgroundHoverColor: #3c3c3c,
         groupingsActiveColor: #292929,
         disabledIconColor: #c7c7cd,
         headingColor: #a3a3a3,
@@ -111,7 +112,7 @@ $themes: (
         inputPlaceholderColor: #707070,
         buttonBackgroundColor: #363636,
         buttonBorderColor: #1f1f1f,
-        buttonColor: #ffffff,
+        buttonColor: #e0e0e0,
         buttonPrimaryColor: #46ace7,
         buttonDangerColor: #ff3e24,
         primaryColor: #52bdfb,
@@ -120,6 +121,7 @@ $themes: (
         successColor: $brand-success,
         infoColor: $brand-info,
         warningColor: $brand-warning,
+        logoSuffix: 'white',
     ),
 );
 

src/popup/settings/options.component.ts

@@ -105,6 +105,7 @@ export class OptionsComponent implements OnInit {
     async saveTheme() {
         await this.storageService.save(ConstantsService.themeKey, this.theme);
         this.analytics.eventTrack.next({ action: 'Set Theme ' + this.theme });
+        window.setTimeout(() => window.location.reload(), 200);
     }
 
     private callAnalytics(name: string, enabled: boolean) {