From 06cbac75b142a62cdcb38ece9241495cdfb1cb9e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Mon, 21 Jun 2021 12:16:20 +0200
Subject: [PATCH] MOBILE-3320 styles: Fix some dark mode colors

---
 src/theme/components/format-text.scss |  2 +-
 src/theme/globals.variables.scss      |  4 ++--
 src/theme/theme.base.scss             | 13 +++++++------
 src/theme/theme.dark.scss             |  6 +++++-
 4 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/theme/components/format-text.scss b/src/theme/components/format-text.scss
index 3c2905e80..b942d188d 100644
--- a/src/theme/components/format-text.scss
+++ b/src/theme/components/format-text.scss
@@ -366,7 +366,7 @@ core-rich-text-editor .core-rte-editor {
     input[type=checkbox] {
         position: relative;
 
-        --color: var(--brand-color-contrast);
+        --color: var(--text-color);
         --color-checked: var(--color);
 
         width: var(--size);
diff --git a/src/theme/globals.variables.scss b/src/theme/globals.variables.scss
index df57eab46..e2a39b886 100644
--- a/src/theme/globals.variables.scss
+++ b/src/theme/globals.variables.scss
@@ -37,12 +37,12 @@ $text-color-dark-rgb:      color-to-rgb-list($text-color-dark) !default;
 
 $background-color:          $gray-light !default;
 $background-color-rgb:      color-to-rgb-list($background-color) !default;
-$background-color-dark:     mix(#ffffff, #000000, 90%) !default; // #1a1a1a
+$background-color-dark:     mix(#ffffff, #000000, 10%) !default; // #1a1a1a
 $background-color-dark-rgb: color-to-rgb-list($background-color-dark) !default;
 
 $ion-item-background:      $white !default;
 $ion-item-background-rgb:  color-to-rgb-list($ion-item-background) !default;
-$ion-item-background-dark: mix(#ffffff, #000000, 80%) !default; // #333333
+$ion-item-background-dark: mix(#ffffff, #000000, 20%) !default; // #333333
 $ion-item-background-dark-rgb: color-to-rgb-list($ion-item-background-dark) !default;
 
 $primary:    $brand-color !default;
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 4c80e76de..74516b562 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -273,7 +273,7 @@ button,
 
 // Clear buttons will be black.
 ion-button.button-clear {
-    --ion-color-primary: var(--brand-color-contrast);
+    --ion-color-primary: var(--brand-color);
 }
 
 [role="button"],
@@ -357,7 +357,7 @@ ion-alert .alert-message {
 }
 
 ion-alert .alert-wrapper button.alert-button {
-    color: var(--brand-color-contrast);
+    color: var(--brand-color);
 }
 
 // Ionic list.
@@ -423,7 +423,8 @@ ion-toolbar {
 }
 
 // Item styles
-[aria-current="page"] {
+[aria-current="page"],
+.item.item-current {
     // TODO: Add safe area to border and RTL
     --ion-safe-area-left: calc(-1 * var(--selected-item-border-width));
     border-inline-start: var(--selected-item-border-width) solid var(--selected-item-color);
@@ -583,7 +584,7 @@ ion-toolbar h1 .core-bar-button-image img {
 // Radio.
 ion-radio,
 input[type=radio] {
-    --color: var(--brand-color-contrast);
+    --color: var(--text-color);
     --color-checked: var(--color);
     --border-radius: 50%;
     --border-width: 2px;
@@ -637,8 +638,8 @@ input[type=radio] {
 ion-checkbox,
 input[type=checkbox] {
     --border-radius: 2px;
-    --border-color-checked: var(--brand-color-contrast);
-    --background-checked: var(--brand-color-contrast);
+    --border-color-checked: var(--text-color);
+    --background-checked: var(--text-color);
     --checkmark-color: var(--contrast-background);
     --border-width: 2px;
     --outer-border-width: 2px;
diff --git a/src/theme/theme.dark.scss b/src/theme/theme.dark.scss
index abe52811e..8d1529b36 100644
--- a/src/theme/theme.dark.scss
+++ b/src/theme/theme.dark.scss
@@ -76,6 +76,8 @@
     --core-header-toolbar-color:        var(--white);
 
     --core-tabs-background: var(--ion-color-step-200);
+    --core-tab-background: var(--core-tabs-background);
+    --core-tab-color: var(--subdued-text-color);
     --core-tab-border-color: var(--gray-light);
     --core-tab-color-active: var(--dark);
 
@@ -84,8 +86,10 @@
     --ion-item-background: #{$ion-item-background-dark};
     --ion-item-detail-icon-color: var(--white);
     --item-divider-background: var(--ion-color-step-200);
-    --spacer-background: var(--ion-color-step-1000);
+    --item-divider-color: var(--text-color);
+    --spacer-background: var(--ion-color-step-0);
 
+    --core-combobox-background: var(--ion-item-background);
     --core-combobox-color: var(--white);
 
     --core-login-background: var(--black);