EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/theme/components/format-text.scss
View File

@ -366,7 +366,7 @@ core-rich-text-editor .core-rte-editor {
input[type=checkbox] { input[type=checkbox] {
position: relative; position: relative;
--color: var(--brand-color-contrast); --color: var(--text-color);
--color-checked: var(--color); --color-checked: var(--color);
width: var(--size); width: var(--size);

4
src/theme/globals.variables.scss
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: $gray-light !default;
$background-color-rgb: color-to-rgb-list($background-color) !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; $background-color-dark-rgb: color-to-rgb-list($background-color-dark) !default;
$ion-item-background: $white !default; $ion-item-background: $white !default;
$ion-item-background-rgb: color-to-rgb-list($ion-item-background) !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; $ion-item-background-dark-rgb: color-to-rgb-list($ion-item-background-dark) !default;
$primary: $brand-color !default; $primary: $brand-color !default;

13
src/theme/theme.base.scss
View File

@ -273,7 +273,7 @@ button,
// Clear buttons will be black. // Clear buttons will be black.
ion-button.button-clear { ion-button.button-clear {
--ion-color-primary: var(--brand-color-contrast); --ion-color-primary: var(--brand-color);
} }
[role="button"], [role="button"],
@ -357,7 +357,7 @@ ion-alert .alert-message {
} }
ion-alert .alert-wrapper button.alert-button { ion-alert .alert-wrapper button.alert-button {
color: var(--brand-color-contrast); color: var(--brand-color);
} }
// Ionic list. // Ionic list.
@ -423,7 +423,8 @@ ion-toolbar {
} }
// Item styles // Item styles
[aria-current="page"] { [aria-current="page"],
.item.item-current {
// TODO: Add safe area to border and RTL // TODO: Add safe area to border and RTL
--ion-safe-area-left: calc(-1 * var(--selected-item-border-width)); --ion-safe-area-left: calc(-1 * var(--selected-item-border-width));
border-inline-start: var(--selected-item-border-width) solid var(--selected-item-color); 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. // Radio.
ion-radio, ion-radio,
input[type=radio] { input[type=radio] {
--color: var(--brand-color-contrast); --color: var(--text-color);
--color-checked: var(--color); --color-checked: var(--color);
--border-radius: 50%; --border-radius: 50%;
--border-width: 2px; --border-width: 2px;
@ -637,8 +638,8 @@ input[type=radio] {
ion-checkbox, ion-checkbox,
input[type=checkbox] { input[type=checkbox] {
--border-radius: 2px; --border-radius: 2px;
--border-color-checked: var(--brand-color-contrast); --border-color-checked: var(--text-color);
--background-checked: var(--brand-color-contrast); --background-checked: var(--text-color);
--checkmark-color: var(--contrast-background); --checkmark-color: var(--contrast-background);
--border-width: 2px; --border-width: 2px;
--outer-border-width: 2px; --outer-border-width: 2px;

6
src/theme/theme.dark.scss
View File

@ -76,6 +76,8 @@
--core-header-toolbar-color: var(--white); --core-header-toolbar-color: var(--white);
--core-tabs-background: var(--ion-color-step-200); --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-border-color: var(--gray-light);
--core-tab-color-active: var(--dark); --core-tab-color-active: var(--dark);
@ -84,8 +86,10 @@
--ion-item-background: #{$ion-item-background-dark}; --ion-item-background: #{$ion-item-background-dark};
--ion-item-detail-icon-color: var(--white); --ion-item-detail-icon-color: var(--white);
--item-divider-background: var(--ion-color-step-200); --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-combobox-color: var(--white);
--core-login-background: var(--black); --core-login-background: var(--black);