Light theme updates

Trying to get the light theme to look exactly like the original theme
threema-ch · Apr 28, 2019 · e78bad4 · e78bad4
1 parent 3c0eea7
commit e78bad4
Show file tree

Hide file tree

Showing 9 changed files with 90 additions and 50 deletions.
diff --git a/src/sass/components/_backbutton.scss b/src/sass/components/_backbutton.scss
@@ -7,7 +7,7 @@
 
     md-icon {
         transform: scale(1.2);
-        color: $icon-light-color;
+        color: $icon-dark-color;
     }
 
     &.md-focused {

diff --git a/src/sass/components/_buttons.scss b/src/sass/components/_buttons.scss
@@ -1,10 +1,11 @@
 md-dialog md-dialog-actions .md-button {
     background-color: $button-color-enabled;
+    color: $button-text-alt-color !important; // $button-text-color
 }
 
 md-select {
     .md-select-value {
-        color: $text-dark-color;
+        color: $text-dark-color !important;
 
         .md-select-placeholder {
             color: $text-dark-color;
@@ -14,12 +15,6 @@ md-select {
             color: $text-dark-color;
         }
     }
-
-    :not([disabled]) {
-        :focus .md-select-value {
-            color: $text-dark-color;
-        }
-    }
 }
 
 .md-select-menu-container {
@@ -31,11 +26,27 @@ md-select {
     }
 }
 
+md-select-menu md-content {
+    background-color: $background-very-light-color !important;
+}
+
 md-select-menu md-content md-option {
+    background-color: $background-very-light-color !important;
+    color: $text-dark-color;
+}
+
+md-select-menu md-content md-option:not([disabled]):hover {
+    background-color: $button-hover-color !important;
     color: $text-dark-color;
 }
 
+md-select-menu md-content md-option[selected] {
+    background-color: $button-selected-color !important;
+    color: $text-dark-color !important;
+}
+
 md-menu-content md-menu-item {
+    background-color: $background-very-light-color;
     color: $button-text-color;
 }
 
@@ -44,16 +55,17 @@ button {
     i.material-icons {
         margin-bottom: 3px;
         vertical-align: middle;
+        color: $icon-dark-color !important;
     }
 }
 
 .md-button {
     .md-fab {
         background-color: $primary-500;
-        color: $text-bright-background-color;
+        color: $button-text-alt-color; // $button-text-color
 
         md-icon {
-            color: $text-bright-background-color;
+            color: $button-text-alt-color;
         }
 
         :not([disabled]) {
@@ -67,6 +79,11 @@ button {
         }
     }
 
+    .md-primary {
+        background-color: $primary-500;
+        color: $button-text-alt-color; // $button-text-color
+    }
+
     .md-raised {
         background-color: $button-color-enabled;
         color: $button-text-color;

diff --git a/src/sass/components/_emoji_picker.scss b/src/sass/components/_emoji_picker.scss
@@ -1,11 +1,11 @@
 .twemoji-picker {
     margin: 0;
-    background-color: $background-light-color;
+    background-color: $background-light-alt-color;
     padding: 0 8px;
     min-height: 216px;
 
     &.outline {
-        border: 2px solid $border-color;
+        border: 2px solid $border-alt-color;
         border-radius: 4px;
         width: 366px;
     }
@@ -27,8 +27,8 @@
         position: relative;
         left: 1px;
         margin-left: -1px;
-        border: 1px solid $border-color;
-        background: $background-light-color;
+        border: 1px solid $background-light-alt-color;
+        background: $background-light-alt-color;
         cursor: pointer;
         padding: 4px;
         height: 32px;
@@ -46,13 +46,13 @@
         right: 0;
         bottom: 0;
         left: 0;
-        border: 1px solid $border-color;
-        background: $background-light-color;
+        border: 1px solid $background-very-light-color;
+        background: $background-very-light-color;
         padding: 10px 10px 0;
         overflow-y: scroll;
 
         &::selection {
-            background: rgba(255, 255, 255, 0);
+            background: $white-zero;
         }
     }
 
@@ -61,8 +61,8 @@
 
         &:checked ~ label {
             z-index: 2;
-            border-bottom: 1px solid $background-light-color;
-            background: $background-dark-color;
+            border-bottom: 1px solid $background-very-light-color;
+            background: $background-very-light-color;
         }
 
         &:checked ~ label ~ .content {

diff --git a/src/sass/helpers/_colors.scss b/src/sass/helpers/_colors.scss
@@ -2,7 +2,7 @@ $status-ok: #4caf50;
 $status-warning: #ff9800;
 $status-error: #f44336;
 $status-starred: #ffc107;
-$border-color: #dddddd;
+// $border-color: #dddddd;
 $background-grey: lighten($border-color, 7%);
 $material-grey: rgba(0, 0, 0, .54);
 $material-grey-dark: rgba(0, 0, 0, .87);
@@ -17,7 +17,7 @@ $scrollbar-color-thumb: #cccccc;
 
 $material-card-shadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 5px 0 rgba(0, 0, 0, .23);
 
-$active-placeholder-color: #d3d3d3;
+// $active-placeholder-color: #d3d3d3;
 
 .color-status-ok {
     color: $status-ok;

diff --git a/src/sass/layout/_main.scss b/src/sass/layout/_main.scss
@@ -66,7 +66,7 @@
         height: 100%;
 
         > div.ng-scope {
-            background-color: $conversation-header-color;
+            background-color: $background-dark-color;
             height: 100%;
 
 
@@ -77,13 +77,13 @@
                 align-items: center;
                 z-index: 18;
                 box-shadow: 1px 2px 4px -2px rgba(0, 0, 0, .2);
-                // background-color: $dark-background-color;
+                background-color: $conversation-header-color;
                 padding: 0 $main-padding;
                 min-height: 68px;
 
                 >* {
                     margin-left: 8px;
-                    color: $secondary-000;
+                    color: text-bright-background-color;
                 } // TODO This might need renaming to header-detail
 
                 .header-detail {
@@ -116,7 +116,7 @@
                     }
 
                     .material-icons {
-                        color: $icon-light-color;
+                        color: $icon-dark-color;
                     }
                 }
             }
@@ -260,12 +260,12 @@
 }
 
 .material-icons {
-    color: $icon-color;
+    color: $icon-material-grey-color;
 
     &.as-button {
         opacity: .5;
         cursor: pointer;
-        color: $icon-color;
+        color: $icon-material-grey-color;
 
         &:hover {
             opacity: 1;
@@ -285,14 +285,10 @@
     }
 
     .md-primary {
-        color: $icon-color;
+        color: $icon-material-grey-color;
     }
 }
 
-md-menu-content {
-    background-color: $background-light-color;
-}
-
 md-dialog.md-default-theme,
 md-dialog {
     background-color: $background-light-color;
@@ -477,3 +473,7 @@ md-toolbar {
         }
     }
 }
+
+md-menu-content {
+    background-color: $background-very-light-color;
+}
diff --git a/src/sass/sections/_conversation.scss b/src/sass/sections/_conversation.scss
@@ -2,7 +2,6 @@
     display: flex;
     position: relative;
     flex-direction: column;
-    background-color: $background-very-light-color;
     background-image: url($wallpaper);
     height: 100%;
 
@@ -39,7 +38,7 @@
             text-overflow: ellipsis;
             line-height: 1.3;
             white-space: nowrap;
-            color: $text-light-color;
+            color: $text-dark-color;
         }
 
         .conversation-header-details-name {
@@ -49,7 +48,7 @@
             text-overflow: ellipsis;
             line-height: 1.3;
             white-space: nowrap;
-            color: $secondary-000;
+            color: $conversation-header-text-color;
         }
     }
 
@@ -110,7 +109,6 @@
             width: 100%;
 
             .compose {
-                border: 0 solid $status-error-color;
                 color: $text-dark-color;
                 caret-color: $text-bright-background-color;
             }
@@ -472,7 +470,7 @@
         justify-content: center;
 
         .message-body {
-            background-color: #fcf8e3;
+            background-color: $ctrl-message-bubble-color;
 
             .message-text {
                 margin-top: 0;

diff --git a/src/sass/sections/_navigation.scss b/src/sass/sections/_navigation.scss
@@ -10,13 +10,13 @@
     justify-content: center;
     z-index: 21;
     box-shadow: -2px 2px 4px -2px rgba(0, 0, 0, .8);
-    background-color: $conversation-header-color;
+    background-color: $navigation-header-color;
     padding: 0 $main-padding 0 (2 * $main-padding);
     min-height: 68px;
     color: $secondary-000;
 
     .material-icons.md-light {
-        color: $icon-light-color;
+        color: $icon-light-color !important;
     }
 
     .my-identity {
@@ -44,7 +44,7 @@
     background-color: $background-light-color;
 
     .material-icons.md-dark {
-        color: $icon-medium-dark-color;
+        color: $icon-dark-color;
     }
 
     .main {
@@ -83,7 +83,7 @@
                 margin: 0;
                 border: 1px solid $text-bright-background-color;
                 border-radius: $material-radius;
-                background-color: $background-light-color;
+                background-color: $secondary-000;
                 padding: $main-padding;
                 width: 100%;
                 color: $text-dark-color;
@@ -418,7 +418,7 @@
         }
 
         .identity {
-            color: $latest-message-text-color;
+            color: $text-bright-background-color;
         }
 
         .nickname {

diff --git a/src/sass/themes/app-dark.scss b/src/sass/themes/app-dark.scss
@@ -35,6 +35,7 @@ $secondary-600: rgba(116, 116, 116, 1);
 $secondary-570: rgba(148, 148, 148, 1);
 $secondary-500: rgba(157, 157, 157, 1); // Standard
 $secondary-400: rgba(188, 188, 188, 1);
+$secondary-320: rgba(219, 219, 219, 1);
 $secondary-300: rgba(223, 223, 223, 1);
 $secondary-200: rgba(237, 237, 237, 1);
 $secondary-100: rgba(245, 245, 245, 1);
@@ -53,6 +54,7 @@ $status-starred-color: #ffc107;
 
 // Border colors
 $border-color: $secondary-750;
+$border-alt-color: $secondary-320;
 
 // Scrollbar colors
 $scrollbar-thumb-color: $secondary-400;
@@ -61,8 +63,10 @@ $scrollbar-background-color: $secondary-900;
 // Background colors
 $background-dark-color: $secondary-900;
 $background-light-color: $secondary-850;
+$background-light-alt-color: $background-light-color;
 $background-welcome-light-color: $secondary-000;
 $background-very-light-color: $secondary-750;
+$navigation-header-color: $secondary-800; // secondary-800
 $conversation-header-color: $secondary-800;
 $conversation-background-color: $background-light-color;
 $conversation-background-highlight-color: $background-dark-color;
@@ -77,7 +81,8 @@ px 2px 5px px $material-grey-dark-color;
 // Text colors
 $text-bright-background-color: $secondary-300;
 $text-dark-color: $secondary-500;
-$text-light-color: $text-dark-color;
+$text-light-color: $secondary-050;
+$conversation-header-text-color: $secondary-050;
 
 $text-bright-background-welcome-color: $secondary-999;
 $latest-message-text-color: $text-dark-color;
@@ -91,14 +96,16 @@ $md-toolbar-button-color: $secondary-800;
 
 // Icon colors
 $icon-color: $secondary-000;
-$icon-dark-color: $secondary-600;
+$icon-dark-color: $secondary-400;
 $icon-medium-dark-color: $secondary-500;
+$icon-material-grey-color: $secondary-500;
 $icon-light-color: $secondary-400;
 
 // Message bubble colors
 $message-quote-color: $threema-green-color;
 $message-bubble-color-in: rgb(31, 25, 25);
 $message-bubble-color-out: rgb(27, 39, 52);
+$ctrl-message-bubble-color: #0c2298; //TODO: Check what this color is in the Android App
 
 // Misc colors
 $active-placeholder-color: $text-dark-color;
@@ -112,6 +119,12 @@ $button-color-disabled: lighten($secondary-700, 65%);
 $button-color-pressed: $secondary-750;
 $button-text-color: $secondary-000;
 $button-text-light-color: $secondary-900;
+$button-text-alt-color: $button-text-color;
+
+$button-hover-color: lighten($background-very-light-color, 15%);
+$button-selected-color: darken($background-very-light-color, 10%);
+
+$white-zero: rgba(255, 255, 255, 0);
 
 .color-status-ok {
     color: $status-ok-color;