MOBILE-3320 styles: Fix some dark mode colors

main
Pau Ferrer Ocaña 2021-06-21 12:16:20 +02:00
parent 7cce817d12
commit 06cbac75b1
4 changed files with 15 additions and 10 deletions

View File

@ -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);

View File

@ -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;

View File

@ -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;

View File

@ -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);