diff --git a/core/src/components/note/note.ios.scss b/core/src/components/note/note.ios.scss
index bd3e13a818..51e6b628c9 100644
--- a/core/src/components/note/note.ios.scss
+++ b/core/src/components/note/note.ios.scss
@@ -5,5 +5,5 @@
 // --------------------------------------------------
 
 :host {
-  --ion-color-base: #{$note-ios-color};
+  --color: #{$note-ios-color};
 }
diff --git a/core/src/components/note/note.md.scss b/core/src/components/note/note.md.scss
index f81eef526e..fb90c1cc81 100644
--- a/core/src/components/note/note.md.scss
+++ b/core/src/components/note/note.md.scss
@@ -5,5 +5,5 @@
 // --------------------------------------------------
 
 :host {
-  --ion-color-base: #{$note-md-color};
+  --color: #{$note-md-color};
 }
diff --git a/core/src/components/note/note.scss b/core/src/components/note/note.scss
index 285b202088..b3a2300a50 100644
--- a/core/src/components/note/note.scss
+++ b/core/src/components/note/note.scss
@@ -4,7 +4,11 @@
 // --------------------------------------------------
 
 :host {
-  color: #{current-color(base)};
+  color: var(--color);
 
   font-family: $font-family-base;
 }
+
+:host(.ion-color) {
+  color: #{current-color(base)};
+}
diff --git a/core/src/components/note/note.tsx b/core/src/components/note/note.tsx
index d6a2f0dc0f..c204f2f1d1 100644
--- a/core/src/components/note/note.tsx
+++ b/core/src/components/note/note.tsx
@@ -27,9 +27,7 @@ export class Note {
 
   hostData() {
     return {
-      class: {
-        ...createColorClasses(this.color)
-      }
+      class: createColorClasses(this.color)
     };
   }