initial dark mode support

* ref #221 * won't be working yet as @electron "native-theme" thing is not enabled so far
vladimiry · Dec 20, 2019 · a4c68b7 · a4c68b7
1 parent fc7c328
commit a4c68b7
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 0 deletions.
diff --git a/src/web/browser-window/app/_accounts/accounts.component.scss b/src/web/browser-window/app/_accounts/accounts.component.scss
@@ -1,6 +1,7 @@
 @import "~src/web/variables";
 
 $webview-border: darken($app-color-bg-dark, 10%);
+$webview-border-darkest: darken($app-color-bg-darkest, 10%);
 
 :host {
     display: flex;
@@ -11,8 +12,16 @@ $webview-border: darken($app-color-bg-dark, 10%);
     bottom: 0;
     background-color: $app-color-bg-dark;
 
+    @media (prefers-color-scheme: dark) {
+        background-color: $app-color-bg-darkest;
+    }
+
     &::ng-deep #{$app-prefix}-account {
         border-top: 1px solid $webview-border;
+
+        @media (prefers-color-scheme: dark) {
+            border-top-color: $webview-border-darkest;
+        }
     }
 
     .wrapper {
@@ -134,6 +143,12 @@ $webview-border: darken($app-color-bg-dark, 10%);
                 #{$app-prefix}-account {
                     border-left: 1px solid $webview-border;
                     border-top: 0;
+
+                    @media (prefers-color-scheme: dark) {
+                        &::ng-deep #{$app-prefix}-account {
+                            border-left-color: $webview-border-darkest;
+                        }
+                    }
                 }
             }
 

diff --git a/src/web/variables.scss b/src/web/variables.scss
@@ -8,6 +8,7 @@ $app-spacer-3: map-get($spacers, 3);
 
 $app-color-purple-light: #987ebf;
 $app-color-bg-dark: #5a6786;
+$app-color-bg-darkest: #5a6786; // TODO dark theme : use protonmail v4 dark bg #212123
 $app-color-warning-light-text: theme-color-level("warning", 6);
 
 $app-font-size-base-small: $font-size-base * 0.75;