diff --git a/core/src/components/refresher/refresher.md.vars.scss b/core/src/components/refresher/refresher.md.vars.scss
index 11d5ac73c75..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 #ececec !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:      white !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;