diff --git a/core/src/css/core.scss b/core/src/css/core.scss
index 5ce82f24a1..a52a0d4c7a 100644
--- a/core/src/css/core.scss
+++ b/core/src/css/core.scss
@@ -1,9 +1,10 @@
 @use "sass:map";
 @import "../themes/native/native.globals";
+@import "../themes/ionic/ionic.theme.default";
 @import "../components/menu/menu.ios.vars";
 @import "../components/menu/menu.md.vars";
 
-:root {
+.md:not(.ionic):root, .ios:not(.ionic):root {
   /**
    * Loop through each color object from the
    * `ionic.theme.default.scss` file
@@ -19,6 +20,22 @@
   }
 }
 
+.ionic:root {
+  /**
+   * Loop through each color object from the
+   * `ionic.theme.default.scss` file
+   * and generate CSS Variables for each color.
+   */
+  @each $color-name, $value in $ionic-colors {
+    --ion-color-#{$color-name}: #{map.get($value, base)};
+    --ion-color-#{$color-name}-rgb: #{color-to-rgb-list(map.get($value, base))};
+    --ion-color-#{$color-name}-contrast: #{map.get($value, contrast)};
+    --ion-color-#{$color-name}-contrast-rgb: #{color-to-rgb-list(map.get($value, contrast))};
+    --ion-color-#{$color-name}-shade: #{map.get($value, shade)};
+    --ion-color-#{$color-name}-tint: #{map.get($value, tint)};
+  }
+}
+
 // Ionic Font Family
 // --------------------------------------------------
 
diff --git a/core/src/themes/ionic/ionic.globals.scss b/core/src/themes/ionic/ionic.globals.scss
index 693b344968..e4006619d4 100644
--- a/core/src/themes/ionic/ionic.globals.scss
+++ b/core/src/themes/ionic/ionic.globals.scss
@@ -7,6 +7,9 @@
 // Global Utility Functions
 @forward "../functions.sizes";
 @forward "../functions.string";
+@forward "../functions.color";
 
 // Global Font Functions
 @forward "../functions.font";
+
+// @import "./ionic.theme.default.scss";
\ No newline at end of file
diff --git a/core/src/themes/ionic/ionic.theme.default.scss b/core/src/themes/ionic/ionic.theme.default.scss
new file mode 100644
index 0000000000..f48b4db680
--- /dev/null
+++ b/core/src/themes/ionic/ionic.theme.default.scss
@@ -0,0 +1,47 @@
+@use '../../foundations/ionic.vars.scss' as tokens;
+
+$primary: #105cef;
+$neutral: #f1f1f1;
+$success: #1ba433;
+$warning: #c37100;
+$danger: #e52929;
+$info: #1ea2bf;
+
+$ionic-colors: (
+  primary: (
+    base: #105cef,
+    contrast: #fff,
+    shade: #0e51d2,
+    tint: #286cf1,
+  ),
+  neutral: (
+    base: #f1f1f1,
+    contrast: #fff,
+    shade: #d4d4d4,
+    tint: #f2f2f2,
+  ),
+  success: (
+    base: #1ba433,
+    contrast: #fff,
+    shade: #18902d,
+    tint: #32ad47,
+  ),
+  warning: (
+    base: #c37100,
+    contrast: #fff,
+    shade: #ac6300,
+    tint: #c97f1a,
+  ),
+  danger: (
+    base: #e52929,
+    contrast: #fff,
+    shade: #ca2424,
+    tint: #e83e3e,
+  ),
+  info: (
+    base: #1ea2bf,
+    contrast: #fff,
+    shade: #1a8fa8,
+    tint: #35abc5,
+  ),
+);