From 857d832b042180b9503563172716ef9d9327aa1c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Wed, 19 May 2021 12:50:06 +0200 Subject: [PATCH] MOBILE-3320 dark: Improve darkmode colors --- src/theme/globals.variables.scss | 134 ++++++++++++++++++++++++++++--- src/theme/theme.dark.scss | 49 ++++++++--- 2 files changed, 161 insertions(+), 22 deletions(-) diff --git a/src/theme/globals.variables.scss b/src/theme/globals.variables.scss index d4d9c27fd..e9bf906b4 100644 --- a/src/theme/globals.variables.scss +++ b/src/theme/globals.variables.scss @@ -7,13 +7,36 @@ /* * App colors */ +$shade-0: #000000 !default; +$shade-100: #ffffff !default; +$shade-5: mix($shade-100, $shade-0, 5%) !default; // #0d0d0d +$shade-10: mix($shade-100, $shade-0, 10%) !default; // #1a1a1a +$shade-15: mix($shade-100, $shade-0, 15%) !default; // #262626 +$shade-20: mix($shade-100, $shade-0, 20%) !default; // #333333 +$shade-25: mix($shade-100, $shade-0, 25%) !default; // #404040 +$shade-30: mix($shade-100, $shade-0, 30%) !default; // #4d4d4d +$shade-35: mix($shade-100, $shade-0, 35%) !default; // #595959 +$shade-40: mix($shade-100, $shade-0, 40%) !default; // #666666 +$shade-45: mix($shade-100, $shade-0, 45%) !default; // #737373 +$shade-50: mix($shade-100, $shade-0, 50%) !default; // #808080 +$shade-55: mix($shade-100, $shade-0, 55%) !default; // #8c8c8c +$shade-60: mix($shade-100, $shade-0, 60%) !default; // #999999 +$shade-65: mix($shade-100, $shade-0, 65%) !default; // #a6a6a6 +$shade-70: mix($shade-100, $shade-0, 70%) !default; // #b3b3b3 +$shade-75: mix($shade-100, $shade-0, 75%) !default; // #bfbfbf +$shade-80: mix($shade-100, $shade-0, 80%) !default; // #cccccc +$shade-85: mix($shade-100, $shade-0, 85%) !default; // #d9d9d9 +$shade-90: mix($shade-100, $shade-0, 90%) !default; // #e6e6e6 +$shade-95: mix($shade-100, $shade-0, 95%) !default; // #f2f2f2 + $black: #282828 !default; // Headings, standard text. $gray-darker: #686566 !default; // Text (emphasis-detail), placeholder, background. $gray-dark: #9e9e9e !default; // Borders (never text). $gray: #dddddd !default; $gray-light: #e9e9e9 !default; // Background. $gray-lighter: #f5f5f5 !default; -$white: #ffffff !default; // Background, reversed text. +$white: $shade-100 !default; // Background, reversed text. + $blue: #0064d2 !default; // Link, background. $turquoise: #007982 !default; // Accent. @@ -23,21 +46,21 @@ $orange: #f98012 !default; // Accent (never text). $yellow: #fbad1a !default; // Accent (never text). $purple: #8e24aa !default; // Accent (never text). -$blue-light: mix($blue, white, 20%) !default; // Background. +$blue-light: mix($blue, white, 40%) !default; // Background. $blue-dark: darken($blue, 10%) !default; -$turquoise-light: mix($turquoise, white, 20%) !default; // Background. +$turquoise-light: mix($turquoise, white, 40%) !default; // Background. $turquoise-dark: darken($turquoise, 10%) !default; -$green-light: mix($green, white, 20%) !default; +$green-light: mix($green, white, 40%) !default; $green-dark: darken($green, 10%) !default; -$red-light: mix($red, white, 20%) !default; +$red-light: mix($red, white, 40%) !default; $red-dark: darken($red, 10%) !default; $orange-light: lighten($orange, 10%) !default; -$yellow-light: mix($yellow, white, 20%) !default; +$yellow-light: mix($yellow, white, 40%) !default; $yellow-dark: mix($yellow, black, 40%) !default; $brand-color: $orange !default; @@ -47,12 +70,14 @@ $brand-color-dark: darken($brand-color, 10%) !default; $text-color: $black !default; $text-color-dark: $white !default; $link-color: $blue !default; +$link-color-dark: $blue-light !default; $background-color: $gray-light !default; -$background-color-dark: #1e1e1e !default; +$background-color-dark: #{$shade-10} !default; $subdued-text-color: $gray-darker !default; $ion-item-background: $white !default; -$ion-item-background-dark: #1e1e1e !default; +$ion-item-background-dark: #{$shade-20} !default; +$ion-item-divider-background-dark: #{$shade-25} !default; $core-online-color: #5cb85c !default; @@ -130,10 +155,79 @@ $colors: ( ) ) !default; +$primary-dark: $blue-light !default; +$secondary-dark: $brand-color !default; +$tertiary-dark: $turquoise-light !default; +$danger-dark: $red-light !default; +$warning-dark: $yellow-light !default; +$success-dark: $green-light !default; +$info-dark: $blue-light !default; +$light-dark: $dark !default; +$medium-dark: $gray-light !default; +$dark-dark: $light !default; + // Just swipe light and dark. $colors-dark: ( - light: map-get($colors, dark), - dark: map-get($colors, light), + primary: ( + base: $primary-dark, + contrast: get_contrast_color($primary-dark), + shade: get-color-shade($primary-dark), + tint: get-color-tint($primary-dark) + ), + secondary: ( + base: $secondary-dark, + contrast: get_contrast_color($secondary-dark), + shade: get-color-shade($secondary-dark), + tint: get-color-tint($secondary-dark) + ), + tertiary: ( + base: $tertiary-dark, + contrast: get_contrast_color($tertiary-dark), + shade: get-color-shade($tertiary-dark), + tint: get-color-tint($tertiary-dark) + ), + success: ( + base: $success-dark, + contrast: get_contrast_color($success-dark), + shade: get-color-shade($success-dark), + tint: get-color-tint($success-dark) + ), + warning: ( + base: $warning-dark, + contrast: get_contrast_color($warning-dark), + shade: get-color-shade($warning-dark), + tint: get-color-tint($warning-dark) + ), + danger: ( + base: $danger-dark, + contrast: get_contrast_color($danger-dark), + shade: get-color-shade($danger-dark), + tint: get-color-tint($danger-dark) + ), + info: ( + base: $info-dark, + contrast: get_contrast_color($info-dark), + shade: get-color-shade($info-dark), + tint: get-color-tint($info-dark) + ), + light: ( + base: $light-dark, + contrast: get_contrast_color($light-dark), + shade: get-color-shade($light-dark), + tint: get-color-tint($light-dark) + ), + medium: ( + base: $medium-dark, + contrast: get_contrast_color($medium-dark), + shade: get-color-shade($medium-dark), + tint: get-color-tint($medium-dark) + ), + dark: ( + base: $dark-dark, + contrast: get_contrast_color($dark-dark), + shade: get-color-shade($dark-dark), + tint: get-color-tint($dark-dark) + ) ) !default; $core-course-image-background: #81ecec, #74b9ff, #a29bfe, #dfe6e9, #00b894, #0984e3, #b2bec3, #fdcb6e, #fd79a8, #6c5ce7 !default; @@ -175,8 +269,11 @@ $toolbar-button-image-size: 44px !default; // Bottom tab bar. $bottom-tabs-background: $white !default; +$bottom-tabs-background-dark: $shade-15 !default; $bottom-tabs-color: $gray-darker !default; +$bottom-tabs-color-dark: $white !default; $bottom-tabs-color-selected: $primary !default; +$bottom-tabs-color-selected-dark: $primary-dark !default; $core-text-hightlight-background-color: lighten($blue, 40%) !default; @@ -188,14 +285,17 @@ $core-tab-background: $core-tabs-background !default; $core-tab-color: $gray-dark !default; $core-tab-border-color: $gray !default; $core-tab-color-active: $primary !default; -$core-tab-border-color-active: $core-tab-color-active !default; +$core-tab-color-active-dark: $primary-dark !default; -$core-tabs-background-dark: $black !default; +$core-tabs-background-dark: $shade-25 !default; $core-tab-background-dark: $core-tabs-background-dark !default; $core-tab-color-dark: $white !default; $core-tab-border-color-dark: $gray-light !default; +$core-tab-border-color-active: $core-tab-color-active !default; +$core-tab-border-color-active-dark: $core-tab-color-active-dark !default; $core-progressbar-color: $primary !default; +$core-progressbar-color-dark: $primary !default; $core-progressbar-text-color: $gray-darker !default; $core-progressbar-background: $gray-lighter !default; $core-progressbar-height: 8px !default; @@ -207,8 +307,10 @@ $core-side-blocks-min-width: 280px !default; //// $core-combobox-color: $primary !default; +$core-combobox-color-dark: $primary-dark !default; $core-selected-item-color: $primary !default; +$core-selected-item-color-dark: $primary-dark !default; $core-selected-item-border-width: 5px !default; $core-login-background: $white !default; @@ -244,6 +346,14 @@ $addon-messages-avatar-size: 30px !default; $addon-messages-discussion-badge: $primary !default; $addon-messages-discussion-badge-text: $white !default; +$addon-messages-message-bg-dark: $black !default; +$addon-messages-message-activated-bg-dark: $gray-dark !default; +$addon-messages-message-note-text-dark: $gray-light !default; +$addon-messages-message-mine-bg-dark: $shade-0 !default; +$addon-messages-message-mine-activated-bg-dark: $gray !default; +$addon-messages-discussion-badge-dark: $primary-dark !default; +$addon-messages-discussion-badge-text-dark: $black !default; + $addon-forum-avatar-size: 44px !default; $addon-forum-border-color: $gray !default; $addon-forum-highlight-color: $gray-lighter !default; diff --git a/src/theme/theme.dark.scss b/src/theme/theme.dark.scss index 69be801f8..2b1218e34 100644 --- a/src/theme/theme.dark.scss +++ b/src/theme/theme.dark.scss @@ -12,8 +12,7 @@ --ion-text-color: #{$text-color-dark}; --ion-text-color-rgb: color-to-rgb-list(var(--ion-text-color)); - --ion-border-color: #3f3f3f; - + // Enlighten the ionic shades. --ion-color-step-50: #1e1e1e; --ion-color-step-100: #2a2a2a; --ion-color-step-150: #363636; @@ -34,16 +33,25 @@ --ion-color-step-900: #e7e7e7; --ion-color-step-950: #f3f3f3; - --light: #{$dark}; - --dark: #{$light}; + --primary: #{$primary-dark}; + --secondary: #{$secondary-dark}; + --tertiary: #{$tertiary-dark}; + --success: #{$success-dark}; + --danger: #{$danger-dark}; + --warning: #{$warning-dark}; + --info: #{$info-dark}; + --light: #{$light-dark}; + --dark: #{$dark-dark}; + --medium: #{$medium-dark}; @each $color-name, $value in $colors-dark { @include generate-color($color-name, $colors-dark); } - --ion-tab-bar-background: #1f1f1f; + --ion-border-color: #{$shade-15}; - --ion-card-background: #1c1c1d; + --ion-card-color: #{$text-color-dark}; + --ion-card-background: #{$ion-item-background-dark}; ion-content { --background: var(--ion-background-color); @@ -51,28 +59,41 @@ --contrast-background: var(--ion-background-color); } + --core-bottom-tabs-background: #{$bottom-tabs-background-dark}; + --core-bottom-tabs-color: #{$bottom-tabs-color-dark}; + --core-bottom-tabs-color-selected: #{$bottom-tabs-color-selected-dark}; + ion-action-sheet { .action-sheet-cancel { --button-color: var(--ion-color-danger-tint); } } + --core-link-color: #{$link-color-dark}; + --core-tabs-background: #{$core-tabs-background-dark}; --core-tab-background: #{$core-tab-background-dark}; --core-tab-color: #{$core-tab-color-dark}; --core-tab-border-color: #{$core-tab-border-color-dark}; - + --core-tab-color-active: #{$core-tab-color-active-dark}; + --core-tab-border-color-active: #{$core-tab-border-color-active-dark}; core-progress-bar { + --color: #{$core-progressbar-color-dark}; --text-color: #{$core-progressbar-text-color-dark}; } --ion-item-background: #{$ion-item-background-dark}; - --ion-item-detail-icon-: var(--white); + --ion-item-detail-icon-color: var(--white); ion-item-divider, ion-item.divider { - --background: var(--black); - --color: var(--white); + --background: #{$ion-item-divider-background-dark}; + --color: #{$text-color-dark}; } + --core-combobox-background: var(--ion-item-background); + --core-combobox-color: #{$core-combobox-color-dark}; + + --selected-item-color: #{$core-selected-item-color-dark}; + --core-login-background: #{$core-login-background-dark}; --core-login-text-color: #{$core-login-text-color-dark}; @@ -95,6 +116,14 @@ --core-dd-question-selected-shadow: 2px 2px 4px var(--gray-light); + --addon-messages-message-bg: #{$addon-messages-message-bg-dark}; + --addon-messages-message-activated-bg: #{$addon-messages-message-activated-bg-dark}; + --addon-messages-message-note-text: #{$addon-messages-message-note-text-dark}; + --addon-messages-message-mine-bg: #{$addon-messages-message-mine-bg-dark}; + --addon-messages-message-mine-activated-bg: #{$addon-messages-message-mine-activated-bg-dark}; + --addon-messages-discussion-badge: #{$addon-messages-discussion-badge-dark}; + --addon-messages-discussion-badge-text: #{$addon-messages-discussion-badge-text-dark}; + --addon-forum-border-color: #{$addon-forum-border-color-dark}; --addon-forum-highlight-color: #{$addon-forum-highlight-color-dark}; }