From de09459c3964c167b571b1cb11d5321f71102738 Mon Sep 17 00:00:00 2001 From: Yohann CINTRE Date: Tue, 8 Dec 2020 15:04:35 +0100 Subject: [PATCH 1/2] fix(refresher): support dark mode on material design closes #22637 --- core/src/components/refresher/refresher.md.vars.scss | 4 ++-- core/src/themes/ionic.theme.default.md.scss | 5 +++++ 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/core/src/components/refresher/refresher.md.vars.scss b/core/src/components/refresher/refresher.md.vars.scss index 11d5ac73c75..fd100880bc7 100644 --- a/core/src/components/refresher/refresher.md.vars.scss +++ b/core/src/components/refresher/refresher.md.vars.scss @@ -10,10 +10,10 @@ $refresher-md-text-color: $text-color !default; $refresher-md-native-spinner-color: #{ion-color(primary, base)} !default; /// @prop - Border of the native refresher spinner -$refresher-md-native-spinner-border: 1px solid #ececec !default; +$refresher-md-native-spinner-border: 1px solid #{$refresher-md-border-color} !default; /// @prop - Background of the native refresher spinner -$refresher-md-native-spinner-background: white !default; +$refresher-md-native-spinner-background: #{$refresher-md-background} !default; /// @prop - Box shadow of the native refresher spinner $refresher-md-native-spinner-box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1) !default; diff --git a/core/src/themes/ionic.theme.default.md.scss b/core/src/themes/ionic.theme.default.md.scss index c0012354cc7..7d14824e11b 100644 --- a/core/src/themes/ionic.theme.default.md.scss +++ b/core/src/themes/ionic.theme.default.md.scss @@ -36,3 +36,8 @@ $item-md-color: var(--ion-item-color, $text-color) ! // -------------------------------------------------- $card-md-background: var(--ion-card-background, $item-md-background) !default; $card-md-color: var(--ion-card-color, var(--ion-item-color, $text-color-step-450)) !default; + +// Material Design Refresher +// -------------------------------------------------- +$refresher-md-background: var(--ion-refresher-background, var(--ion-color-step-250, #ffffff)) !default; +$refresher-md-border-color: var(--ion-refresher-border-color, var(--ion-color-step-200, #ececec)) !default; From 7e8ab9ebae3088a40710a0c951cd139bfc233b0b Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 11 Feb 2021 09:55:45 -0500 Subject: [PATCH 2/2] add refresher dark theme without adding new css vars --- core/src/components/refresher/refresher.md.vars.scss | 4 ++-- core/src/themes/ionic.theme.default.md.scss | 5 ----- 2 files changed, 2 insertions(+), 7 deletions(-) diff --git a/core/src/components/refresher/refresher.md.vars.scss b/core/src/components/refresher/refresher.md.vars.scss index fd100880bc7..7d45fb463f2 100644 --- a/core/src/components/refresher/refresher.md.vars.scss +++ b/core/src/components/refresher/refresher.md.vars.scss @@ -10,10 +10,10 @@ $refresher-md-text-color: $text-color !default; $refresher-md-native-spinner-color: #{ion-color(primary, base)} !default; /// @prop - Border of the native refresher spinner -$refresher-md-native-spinner-border: 1px solid #{$refresher-md-border-color} !default; +$refresher-md-native-spinner-border: 1px solid var(--ion-color-step-200, #ececec) !default; /// @prop - Background of the native refresher spinner -$refresher-md-native-spinner-background: #{$refresher-md-background} !default; +$refresher-md-native-spinner-background: var(--ion-color-step-250, #ffffff) !default; /// @prop - Box shadow of the native refresher spinner $refresher-md-native-spinner-box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.1) !default; diff --git a/core/src/themes/ionic.theme.default.md.scss b/core/src/themes/ionic.theme.default.md.scss index 7d14824e11b..c0012354cc7 100644 --- a/core/src/themes/ionic.theme.default.md.scss +++ b/core/src/themes/ionic.theme.default.md.scss @@ -36,8 +36,3 @@ $item-md-color: var(--ion-item-color, $text-color) ! // -------------------------------------------------- $card-md-background: var(--ion-card-background, $item-md-background) !default; $card-md-color: var(--ion-card-color, var(--ion-item-color, $text-color-step-450)) !default; - -// Material Design Refresher -// -------------------------------------------------- -$refresher-md-background: var(--ion-refresher-background, var(--ion-color-step-250, #ffffff)) !default; -$refresher-md-border-color: var(--ion-refresher-border-color, var(--ion-color-step-200, #ececec)) !default;