diff --git a/docs/angular/slides.md b/docs/angular/slides.md
index 9e8e633579f..836b717114a 100644
--- a/docs/angular/slides.md
+++ b/docs/angular/slides.md
@@ -101,7 +101,7 @@ The `ion-slides` component had additional styling that helped create a native lo
 
 ```css
 swiper-container {
-  --swiper-pagination-bullet-inactive-color: var(--ion-color-step-200, #cccccc);
+  --swiper-pagination-bullet-inactive-color: var(--ion-text-color-step-800, #cccccc);
   --swiper-pagination-color: var(--ion-color-primary, #0054e9);
   --swiper-pagination-progressbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.25);
   --swiper-scrollbar-bg-color: rgba(var(--ion-text-color-rgb, 0, 0, 0), 0.1);
diff --git a/static/usage/v8/datetime/styling/global-theming/angular/example_component_css.md b/static/usage/v8/datetime/styling/global-theming/angular/example_component_css.md
new file mode 100644
index 00000000000..c7b7850960b
--- /dev/null
+++ b/static/usage/v8/datetime/styling/global-theming/angular/example_component_css.md
@@ -0,0 +1,9 @@
+```css
+ion-datetime {
+  --background: #fff1f2;
+  --background-rgb: 255, 241, 242;
+
+  border-radius: 16px;
+  box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
+}
+```
diff --git a/static/usage/v8/datetime/styling/global-theming/angular/global_css.md b/static/usage/v8/datetime/styling/global-theming/angular/global_css.md
deleted file mode 100644
index 4ec3d3ecdf9..00000000000
--- a/static/usage/v8/datetime/styling/global-theming/angular/global_css.md
+++ /dev/null
@@ -1,66 +0,0 @@
-```css
-/* Core CSS required for Ionic components to work properly */
-@import '~@ionic/angular/css/core.css';
-
-/* Basic CSS for apps built with Ionic */
-@import '~@ionic/angular/css/normalize.css';
-@import '~@ionic/angular/css/structure.css';
-@import '~@ionic/angular/css/typography.css';
-@import '~@ionic/angular/css/display.css';
-
-/* Optional CSS utils that can be commented out */
-@import '~@ionic/angular/css/padding.css';
-@import '~@ionic/angular/css/float-elements.css';
-@import '~@ionic/angular/css/text-alignment.css';
-@import '~@ionic/angular/css/text-transformation.css';
-@import '~@ionic/angular/css/flex-utils.css';
-
-:root {
-  --ion-color-rose: #831843;
-  --ion-color-rose-rgb: 131, 24, 67;
-  --ion-color-rose-contrast: #ffffff;
-  --ion-color-rose-contrast-rgb: 255, 255, 255;
-  --ion-color-rose-shade: #73153b;
-  --ion-color-rose-tint: #8f2f56;
-
-  --ion-text-color: #881337;
-  --ion-text-color-rgb: 136, 19, 55;
-
-  --ion-color-step-50: #f9e6e9;
-  --ion-color-step-100: #f3dbdf;
-  --ion-color-step-150: #edd0d6;
-  --ion-color-step-200: #e7c5cd;
-  --ion-color-step-250: #e1bac3;
-  --ion-color-step-300: #dbaeba;
-  --ion-color-step-350: #d5a3b1;
-  --ion-color-step-400: #cf98a7;
-  --ion-color-step-450: #c98d9e;
-  --ion-color-step-500: #c48295;
-  --ion-color-step-550: #be778b;
-  --ion-color-step-600: #b86c82;
-  --ion-color-step-650: #b26178;
-  --ion-color-step-700: #ac566f;
-  --ion-color-step-750: #a64b66;
-  --ion-color-step-800: #a03f5c;
-  --ion-color-step-850: #9a3453;
-  --ion-color-step-900: #94294a;
-  --ion-color-step-950: #8e1e40;
-}
-
-.ion-color-rose {
-  --ion-color-base: var(--ion-color-rose);
-  --ion-color-base-rgb: var(--ion-color-rose-rgb);
-  --ion-color-contrast: var(--ion-color-rose-contrast);
-  --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
-  --ion-color-shade: var(--ion-color-rose-shade);
-  --ion-color-tint: var(--ion-color-rose-tint);
-}
-
-ion-datetime {
-  --background: #fff1f2;
-  --background-rgb: 255, 241, 242;
-
-  border-radius: 16px;
-  box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
-}
-```
diff --git a/static/usage/v8/datetime/styling/global-theming/demo.html b/static/usage/v8/datetime/styling/global-theming/demo.html
index 3a8a11078c6..9b04a4681f7 100644
--- a/static/usage/v8/datetime/styling/global-theming/demo.html
+++ b/static/usage/v8/datetime/styling/global-theming/demo.html
@@ -22,25 +22,45 @@
         --ion-text-color: #881337;
         --ion-text-color-rgb: 136, 19, 55;
 
-        --ion-color-step-50: #f9e6e9;
-        --ion-color-step-100: #f3dbdf;
-        --ion-color-step-150: #edd0d6;
-        --ion-color-step-200: #e7c5cd;
-        --ion-color-step-250: #e1bac3;
-        --ion-color-step-300: #dbaeba;
-        --ion-color-step-350: #d5a3b1;
-        --ion-color-step-400: #cf98a7;
-        --ion-color-step-450: #c98d9e;
-        --ion-color-step-500: #c48295;
-        --ion-color-step-550: #be778b;
-        --ion-color-step-600: #b86c82;
-        --ion-color-step-650: #b26178;
-        --ion-color-step-700: #ac566f;
-        --ion-color-step-750: #a64b66;
-        --ion-color-step-800: #a03f5c;
-        --ion-color-step-850: #9a3453;
-        --ion-color-step-900: #94294a;
-        --ion-color-step-950: #8e1e40;
+        --ion-text-color-step-50: #8e1e40;
+        --ion-text-color-step-100: #94294a;
+        --ion-text-color-step-150: #9a3453;
+        --ion-text-color-step-200: #a03f5c;
+        --ion-text-color-step-250: #a64b66;
+        --ion-text-color-step-300: #ac566f;
+        --ion-text-color-step-350: #b26178;
+        --ion-text-color-step-400: #b86c82;
+        --ion-text-color-step-450: #be778b;
+        --ion-text-color-step-500: #c48295;
+        --ion-text-color-step-550: #c98d9e;
+        --ion-text-color-step-600: #cf98a7;
+        --ion-text-color-step-650: #d5a3b1;
+        --ion-text-color-step-700: #dbaeba;
+        --ion-text-color-step-750: #e1bac3;
+        --ion-text-color-step-800: #e7c5cd;
+        --ion-text-color-step-850: #edd0d6;
+        --ion-text-color-step-900: #f3dbdf;
+        --ion-text-color-step-950: #f9e6e9;
+
+        --ion-background-color-step-50: #f9e6e9;
+        --ion-background-color-step-100: #f3dbdf;
+        --ion-background-color-step-150: #edd0d6;
+        --ion-background-color-step-200: #e7c5cd;
+        --ion-background-color-step-250: #e1bac3;
+        --ion-background-color-step-300: #dbaeba;
+        --ion-background-color-step-350: #d5a3b1;
+        --ion-background-color-step-400: #cf98a7;
+        --ion-background-color-step-450: #c98d9e;
+        --ion-background-color-step-500: #c48295;
+        --ion-background-color-step-550: #be778b;
+        --ion-background-color-step-600: #b86c82;
+        --ion-background-color-step-650: #b26178;
+        --ion-background-color-step-700: #ac566f;
+        --ion-background-color-step-750: #a64b66;
+        --ion-background-color-step-800: #a03f5c;
+        --ion-background-color-step-850: #9a3453;
+        --ion-background-color-step-900: #94294a;
+        --ion-background-color-step-950: #8e1e40;
       }
 
       .ion-color-rose {
diff --git a/static/usage/v8/datetime/styling/global-theming/index.md b/static/usage/v8/datetime/styling/global-theming/index.md
index 0fe3944d263..f87d6e8fad5 100644
--- a/static/usage/v8/datetime/styling/global-theming/index.md
+++ b/static/usage/v8/datetime/styling/global-theming/index.md
@@ -1,31 +1,45 @@
 import Playground from '@site/src/components/global/Playground';
 
-import javascript from './javascript.md';
+import javascript_index_html from './javascript/index_html.md';
 
 import react_main_tsx from './react/main_tsx.md';
 import react_main_css from './react/main_css.md';
 
-import vue from './vue.md';
+import vue_example from './vue/example_vue.md';
 
 import angular_example_component_html from './angular/example_component_html.md';
-import angular_global_css from './angular/global_css.md';
+import angular_example_component_css from './angular/example_component_css.md';
+
+import variables_css from './theme/variables_css.md';
 
 <Playground
   version="8"
   size="450px"
   code={{
-    javascript,
+    javascript: {
+      files: {
+        'index.html': javascript_index_html,
+        'theme/variables.css': variables_css,
+      },
+    },
     react: {
       files: {
         'src/main.tsx': react_main_tsx,
         'src/main.css': react_main_css,
+        'src/theme/variables.css': variables_css,
+      },
+    },
+    vue: {
+      files: {
+        'src/components/Example.vue': vue_example,
+        'src/theme/variables.css': variables_css,
       },
     },
-    vue,
     angular: {
       files: {
         'src/app/example.component.html': angular_example_component_html,
-        'src/global.css': angular_global_css,
+        'src/app/example.component.css': angular_example_component_css,
+        'src/theme/variables.css': variables_css,
       },
     },
   }}
diff --git a/static/usage/v8/datetime/styling/global-theming/javascript.md b/static/usage/v8/datetime/styling/global-theming/javascript.md
deleted file mode 100644
index 3da768ccbb4..00000000000
--- a/static/usage/v8/datetime/styling/global-theming/javascript.md
+++ /dev/null
@@ -1,54 +0,0 @@
-```html
-<ion-datetime color="rose"></ion-datetime>
-
-<style>
-  :root {
-    --ion-color-rose: #831843;
-    --ion-color-rose-rgb: 131, 24, 67;
-    --ion-color-rose-contrast: #ffffff;
-    --ion-color-rose-contrast-rgb: 255, 255, 255;
-    --ion-color-rose-shade: #73153b;
-    --ion-color-rose-tint: #8f2f56;
-
-    --ion-text-color: #881337;
-    --ion-text-color-rgb: 136, 19, 55;
-
-    --ion-color-step-50: #f9e6e9;
-    --ion-color-step-100: #f3dbdf;
-    --ion-color-step-150: #edd0d6;
-    --ion-color-step-200: #e7c5cd;
-    --ion-color-step-250: #e1bac3;
-    --ion-color-step-300: #dbaeba;
-    --ion-color-step-350: #d5a3b1;
-    --ion-color-step-400: #cf98a7;
-    --ion-color-step-450: #c98d9e;
-    --ion-color-step-500: #c48295;
-    --ion-color-step-550: #be778b;
-    --ion-color-step-600: #b86c82;
-    --ion-color-step-650: #b26178;
-    --ion-color-step-700: #ac566f;
-    --ion-color-step-750: #a64b66;
-    --ion-color-step-800: #a03f5c;
-    --ion-color-step-850: #9a3453;
-    --ion-color-step-900: #94294a;
-    --ion-color-step-950: #8e1e40;
-  }
-
-  .ion-color-rose {
-    --ion-color-base: var(--ion-color-rose);
-    --ion-color-base-rgb: var(--ion-color-rose-rgb);
-    --ion-color-contrast: var(--ion-color-rose-contrast);
-    --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
-    --ion-color-shade: var(--ion-color-rose-shade);
-    --ion-color-tint: var(--ion-color-rose-tint);
-  }
-
-  ion-datetime {
-    --background: #fff1f2;
-    --background-rgb: 255, 241, 242;
-
-    border-radius: 16px;
-    box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
-  }
-</style>
-```
diff --git a/static/usage/v8/datetime/styling/global-theming/javascript/index_html.md b/static/usage/v8/datetime/styling/global-theming/javascript/index_html.md
new file mode 100644
index 00000000000..04ef57b2e7d
--- /dev/null
+++ b/static/usage/v8/datetime/styling/global-theming/javascript/index_html.md
@@ -0,0 +1,13 @@
+```html
+<ion-datetime color="rose"></ion-datetime>
+
+<style>
+  ion-datetime {
+    --background: #fff1f2;
+    --background-rgb: 255, 241, 242;
+
+    border-radius: 16px;
+    box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
+  }
+</style>
+```
diff --git a/static/usage/v8/datetime/styling/global-theming/react/main_css.md b/static/usage/v8/datetime/styling/global-theming/react/main_css.md
index dccf6c7d370..c7b7850960b 100644
--- a/static/usage/v8/datetime/styling/global-theming/react/main_css.md
+++ b/static/usage/v8/datetime/styling/global-theming/react/main_css.md
@@ -1,45 +1,4 @@
 ```css
-:root {
-  --ion-color-rose: #831843;
-  --ion-color-rose-rgb: 131, 24, 67;
-  --ion-color-rose-contrast: #ffffff;
-  --ion-color-rose-contrast-rgb: 255, 255, 255;
-  --ion-color-rose-shade: #73153b;
-  --ion-color-rose-tint: #8f2f56;
-
-  --ion-text-color: #881337;
-  --ion-text-color-rgb: 136, 19, 55;
-
-  --ion-color-step-50: #f9e6e9;
-  --ion-color-step-100: #f3dbdf;
-  --ion-color-step-150: #edd0d6;
-  --ion-color-step-200: #e7c5cd;
-  --ion-color-step-250: #e1bac3;
-  --ion-color-step-300: #dbaeba;
-  --ion-color-step-350: #d5a3b1;
-  --ion-color-step-400: #cf98a7;
-  --ion-color-step-450: #c98d9e;
-  --ion-color-step-500: #c48295;
-  --ion-color-step-550: #be778b;
-  --ion-color-step-600: #b86c82;
-  --ion-color-step-650: #b26178;
-  --ion-color-step-700: #ac566f;
-  --ion-color-step-750: #a64b66;
-  --ion-color-step-800: #a03f5c;
-  --ion-color-step-850: #9a3453;
-  --ion-color-step-900: #94294a;
-  --ion-color-step-950: #8e1e40;
-}
-
-.ion-color-rose {
-  --ion-color-base: var(--ion-color-rose);
-  --ion-color-base-rgb: var(--ion-color-rose-rgb);
-  --ion-color-contrast: var(--ion-color-rose-contrast);
-  --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
-  --ion-color-shade: var(--ion-color-rose-shade);
-  --ion-color-tint: var(--ion-color-rose-tint);
-}
-
 ion-datetime {
   --background: #fff1f2;
   --background-rgb: 255, 241, 242;
diff --git a/static/usage/v8/datetime/styling/global-theming/theme/variables_css.md b/static/usage/v8/datetime/styling/global-theming/theme/variables_css.md
new file mode 100644
index 00000000000..04a0ceb9f99
--- /dev/null
+++ b/static/usage/v8/datetime/styling/global-theming/theme/variables_css.md
@@ -0,0 +1,78 @@
+```css
+/* Ionic Variables and Theming
+ * ---------------------------------------------------------------
+ * Any overrides to theme variables should be placed in this file.
+ * For more information, please see:
+ * http://ionicframework.com/docs/theming/
+ */
+
+/* This sets the CSS variables for the rose color */
+:root {
+  --ion-color-rose: #831843;
+  --ion-color-rose-rgb: 131, 24, 67;
+  --ion-color-rose-contrast: #ffffff;
+  --ion-color-rose-contrast-rgb: 255, 255, 255;
+  --ion-color-rose-shade: #73153b;
+  --ion-color-rose-tint: #8f2f56;
+}
+
+/* This overrides the global CSS variables for both modes */
+:root.ios,
+:root.md {
+  --ion-background-color: #ffffff;
+  --ion-background-color-rgb: 255, 255, 255;
+
+  --ion-text-color: #881337;
+  --ion-text-color-rgb: 136, 19, 55;
+
+  --ion-text-color-step-50: #8e1e40;
+  --ion-text-color-step-100: #94294a;
+  --ion-text-color-step-150: #9a3453;
+  --ion-text-color-step-200: #a03f5c;
+  --ion-text-color-step-250: #a64b66;
+  --ion-text-color-step-300: #ac566f;
+  --ion-text-color-step-350: #b26178;
+  --ion-text-color-step-400: #b86c82;
+  --ion-text-color-step-450: #be778b;
+  --ion-text-color-step-500: #c48295;
+  --ion-text-color-step-550: #c98d9e;
+  --ion-text-color-step-600: #cf98a7;
+  --ion-text-color-step-650: #d5a3b1;
+  --ion-text-color-step-700: #dbaeba;
+  --ion-text-color-step-750: #e1bac3;
+  --ion-text-color-step-800: #e7c5cd;
+  --ion-text-color-step-850: #edd0d6;
+  --ion-text-color-step-900: #f3dbdf;
+  --ion-text-color-step-950: #f9e6e9;
+
+  --ion-background-color-step-50: #f9e6e9;
+  --ion-background-color-step-100: #f3dbdf;
+  --ion-background-color-step-150: #edd0d6;
+  --ion-background-color-step-200: #e7c5cd;
+  --ion-background-color-step-250: #e1bac3;
+  --ion-background-color-step-300: #dbaeba;
+  --ion-background-color-step-350: #d5a3b1;
+  --ion-background-color-step-400: #cf98a7;
+  --ion-background-color-step-450: #c98d9e;
+  --ion-background-color-step-500: #c48295;
+  --ion-background-color-step-550: #be778b;
+  --ion-background-color-step-600: #b86c82;
+  --ion-background-color-step-650: #b26178;
+  --ion-background-color-step-700: #ac566f;
+  --ion-background-color-step-750: #a64b66;
+  --ion-background-color-step-800: #a03f5c;
+  --ion-background-color-step-850: #9a3453;
+  --ion-background-color-step-900: #94294a;
+  --ion-background-color-step-950: #8e1e40;
+}
+
+/* This adds the rose color */
+.ion-color-rose {
+  --ion-color-base: var(--ion-color-rose);
+  --ion-color-base-rgb: var(--ion-color-rose-rgb);
+  --ion-color-contrast: var(--ion-color-rose-contrast);
+  --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
+  --ion-color-shade: var(--ion-color-rose-shade);
+  --ion-color-tint: var(--ion-color-rose-tint);
+}
+```
diff --git a/static/usage/v8/datetime/styling/global-theming/vue.md b/static/usage/v8/datetime/styling/global-theming/vue.md
deleted file mode 100644
index 32e682cfbc9..00000000000
--- a/static/usage/v8/datetime/styling/global-theming/vue.md
+++ /dev/null
@@ -1,65 +0,0 @@
-```html
-<template>
-  <ion-datetime color="rose"></ion-datetime>
-</template>
-
-<script lang="ts">
-  import { IonDatetime } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonDatetime },
-  });
-</script>
-
-<style>
-  :root {
-    --ion-color-rose: #831843;
-    --ion-color-rose-rgb: 131, 24, 67;
-    --ion-color-rose-contrast: #ffffff;
-    --ion-color-rose-contrast-rgb: 255, 255, 255;
-    --ion-color-rose-shade: #73153b;
-    --ion-color-rose-tint: #8f2f56;
-
-    --ion-text-color: #881337;
-    --ion-text-color-rgb: 136, 19, 55;
-
-    --ion-color-step-50: #f9e6e9;
-    --ion-color-step-100: #f3dbdf;
-    --ion-color-step-150: #edd0d6;
-    --ion-color-step-200: #e7c5cd;
-    --ion-color-step-250: #e1bac3;
-    --ion-color-step-300: #dbaeba;
-    --ion-color-step-350: #d5a3b1;
-    --ion-color-step-400: #cf98a7;
-    --ion-color-step-450: #c98d9e;
-    --ion-color-step-500: #c48295;
-    --ion-color-step-550: #be778b;
-    --ion-color-step-600: #b86c82;
-    --ion-color-step-650: #b26178;
-    --ion-color-step-700: #ac566f;
-    --ion-color-step-750: #a64b66;
-    --ion-color-step-800: #a03f5c;
-    --ion-color-step-850: #9a3453;
-    --ion-color-step-900: #94294a;
-    --ion-color-step-950: #8e1e40;
-  }
-
-  .ion-color-rose {
-    --ion-color-base: var(--ion-color-rose);
-    --ion-color-base-rgb: var(--ion-color-rose-rgb);
-    --ion-color-contrast: var(--ion-color-rose-contrast);
-    --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
-    --ion-color-shade: var(--ion-color-rose-shade);
-    --ion-color-tint: var(--ion-color-rose-tint);
-  }
-
-  ion-datetime {
-    --background: #fff1f2;
-    --background-rgb: 255, 241, 242;
-
-    border-radius: 16px;
-    box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
-  }
-</style>
-```
diff --git a/static/usage/v8/datetime/styling/global-theming/vue/example_vue.md b/static/usage/v8/datetime/styling/global-theming/vue/example_vue.md
new file mode 100644
index 00000000000..2fa56a7e745
--- /dev/null
+++ b/static/usage/v8/datetime/styling/global-theming/vue/example_vue.md
@@ -0,0 +1,24 @@
+```html
+<template>
+  <ion-datetime color="rose"></ion-datetime>
+</template>
+
+<script lang="ts">
+  import { IonDatetime } from '@ionic/vue';
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({
+    components: { IonDatetime },
+  });
+</script>
+
+<style>
+  ion-datetime {
+    --background: #fff1f2;
+    --background-rgb: 255, 241, 242;
+
+    border-radius: 16px;
+    box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
+  }
+</style>
+```
diff --git a/static/usage/v8/datetime/theming/angular/example_component_html.md b/static/usage/v8/datetime/theming/angular/example_component_html.md
deleted file mode 100644
index 0a38b1bc5b6..00000000000
--- a/static/usage/v8/datetime/theming/angular/example_component_html.md
+++ /dev/null
@@ -1,3 +0,0 @@
-```html
-<ion-datetime color="rose"></ion-datetime>
-```
diff --git a/static/usage/v8/datetime/theming/angular/global_css.md b/static/usage/v8/datetime/theming/angular/global_css.md
deleted file mode 100644
index 4ec3d3ecdf9..00000000000
--- a/static/usage/v8/datetime/theming/angular/global_css.md
+++ /dev/null
@@ -1,66 +0,0 @@
-```css
-/* Core CSS required for Ionic components to work properly */
-@import '~@ionic/angular/css/core.css';
-
-/* Basic CSS for apps built with Ionic */
-@import '~@ionic/angular/css/normalize.css';
-@import '~@ionic/angular/css/structure.css';
-@import '~@ionic/angular/css/typography.css';
-@import '~@ionic/angular/css/display.css';
-
-/* Optional CSS utils that can be commented out */
-@import '~@ionic/angular/css/padding.css';
-@import '~@ionic/angular/css/float-elements.css';
-@import '~@ionic/angular/css/text-alignment.css';
-@import '~@ionic/angular/css/text-transformation.css';
-@import '~@ionic/angular/css/flex-utils.css';
-
-:root {
-  --ion-color-rose: #831843;
-  --ion-color-rose-rgb: 131, 24, 67;
-  --ion-color-rose-contrast: #ffffff;
-  --ion-color-rose-contrast-rgb: 255, 255, 255;
-  --ion-color-rose-shade: #73153b;
-  --ion-color-rose-tint: #8f2f56;
-
-  --ion-text-color: #881337;
-  --ion-text-color-rgb: 136, 19, 55;
-
-  --ion-color-step-50: #f9e6e9;
-  --ion-color-step-100: #f3dbdf;
-  --ion-color-step-150: #edd0d6;
-  --ion-color-step-200: #e7c5cd;
-  --ion-color-step-250: #e1bac3;
-  --ion-color-step-300: #dbaeba;
-  --ion-color-step-350: #d5a3b1;
-  --ion-color-step-400: #cf98a7;
-  --ion-color-step-450: #c98d9e;
-  --ion-color-step-500: #c48295;
-  --ion-color-step-550: #be778b;
-  --ion-color-step-600: #b86c82;
-  --ion-color-step-650: #b26178;
-  --ion-color-step-700: #ac566f;
-  --ion-color-step-750: #a64b66;
-  --ion-color-step-800: #a03f5c;
-  --ion-color-step-850: #9a3453;
-  --ion-color-step-900: #94294a;
-  --ion-color-step-950: #8e1e40;
-}
-
-.ion-color-rose {
-  --ion-color-base: var(--ion-color-rose);
-  --ion-color-base-rgb: var(--ion-color-rose-rgb);
-  --ion-color-contrast: var(--ion-color-rose-contrast);
-  --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
-  --ion-color-shade: var(--ion-color-rose-shade);
-  --ion-color-tint: var(--ion-color-rose-tint);
-}
-
-ion-datetime {
-  --background: #fff1f2;
-  --background-rgb: 255, 241, 242;
-
-  border-radius: 16px;
-  box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
-}
-```
diff --git a/static/usage/v8/datetime/theming/demo.html b/static/usage/v8/datetime/theming/demo.html
deleted file mode 100644
index 6fa5a34b925..00000000000
--- a/static/usage/v8/datetime/theming/demo.html
+++ /dev/null
@@ -1,76 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Datetime</title>
-    <link rel="stylesheet" href="../../common.css" />
-    <script src="../../common.js"></script>
-    <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@8/dist/ionic/ionic.esm.js"></script>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@8/css/ionic.bundle.css" />
-    <style>
-      :root,
-      .ios body.dark,
-      .md body.dark {
-        --ion-color-rose: #831843;
-        --ion-color-rose-rgb: 131, 24, 67;
-        --ion-color-rose-contrast: #ffffff;
-        --ion-color-rose-contrast-rgb: 255, 255, 255;
-        --ion-color-rose-shade: #73153b;
-        --ion-color-rose-tint: #8f2f56;
-
-        --ion-text-color: #881337;
-        --ion-text-color-rgb: 136, 19, 55;
-
-        --ion-color-step-50: #f9e6e9;
-        --ion-color-step-100: #f3dbdf;
-        --ion-color-step-150: #edd0d6;
-        --ion-color-step-200: #e7c5cd;
-        --ion-color-step-250: #e1bac3;
-        --ion-color-step-300: #dbaeba;
-        --ion-color-step-350: #d5a3b1;
-        --ion-color-step-400: #cf98a7;
-        --ion-color-step-450: #c98d9e;
-        --ion-color-step-500: #c48295;
-        --ion-color-step-550: #be778b;
-        --ion-color-step-600: #b86c82;
-        --ion-color-step-650: #b26178;
-        --ion-color-step-700: #ac566f;
-        --ion-color-step-750: #a64b66;
-        --ion-color-step-800: #a03f5c;
-        --ion-color-step-850: #9a3453;
-        --ion-color-step-900: #94294a;
-        --ion-color-step-950: #8e1e40;
-      }
-
-      .ion-color-rose {
-        --ion-color-base: var(--ion-color-rose);
-        --ion-color-base-rgb: var(--ion-color-rose-rgb);
-        --ion-color-contrast: var(--ion-color-rose-contrast);
-        --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
-        --ion-color-shade: var(--ion-color-rose-shade);
-        --ion-color-tint: var(--ion-color-rose-tint);
-      }
-
-      ion-datetime {
-        --background: #fff1f2;
-        --background-rgb: 255, 241, 242;
-
-        width: 350px;
-
-        border-radius: 16px;
-        box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
-      }
-    </style>
-  </head>
-
-  <body>
-    <ion-app>
-      <ion-content>
-        <div class="container">
-          <ion-datetime color="rose"></ion-datetime>
-        </div>
-      </ion-content>
-    </ion-app>
-  </body>
-</html>
diff --git a/static/usage/v8/datetime/theming/index.md b/static/usage/v8/datetime/theming/index.md
deleted file mode 100644
index 931c2368a60..00000000000
--- a/static/usage/v8/datetime/theming/index.md
+++ /dev/null
@@ -1,35 +0,0 @@
-# TODO FW-4608
-
-import Playground from '@site/src/components/global/Playground';
-
-import javascript from './javascript.md';
-
-import react_main_tsx from './react/main_tsx.md';
-import react_main_css from './react/main_css.md';
-
-import vue from './vue.md';
-
-import angular_example_component_html from './angular/example_component_html.md';
-import angular_global_css from './angular/global_css.md';
-
-<Playground
-  version="8"
-  size="450px"
-  code={{
-    javascript,
-    react: {
-      files: {
-        'src/main.tsx': react_main_tsx,
-        'src/main.css': react_main_css,
-      },
-    },
-    vue,
-    angular: {
-      files: {
-        'src/app/example.component.html': angular_example_component_html,
-        'src/global.css': angular_global_css,
-      },
-    },
-  }}
-  src="usage/v8/datetime/theming/demo.html"
-/>
diff --git a/static/usage/v8/datetime/theming/javascript.md b/static/usage/v8/datetime/theming/javascript.md
deleted file mode 100644
index 3da768ccbb4..00000000000
--- a/static/usage/v8/datetime/theming/javascript.md
+++ /dev/null
@@ -1,54 +0,0 @@
-```html
-<ion-datetime color="rose"></ion-datetime>
-
-<style>
-  :root {
-    --ion-color-rose: #831843;
-    --ion-color-rose-rgb: 131, 24, 67;
-    --ion-color-rose-contrast: #ffffff;
-    --ion-color-rose-contrast-rgb: 255, 255, 255;
-    --ion-color-rose-shade: #73153b;
-    --ion-color-rose-tint: #8f2f56;
-
-    --ion-text-color: #881337;
-    --ion-text-color-rgb: 136, 19, 55;
-
-    --ion-color-step-50: #f9e6e9;
-    --ion-color-step-100: #f3dbdf;
-    --ion-color-step-150: #edd0d6;
-    --ion-color-step-200: #e7c5cd;
-    --ion-color-step-250: #e1bac3;
-    --ion-color-step-300: #dbaeba;
-    --ion-color-step-350: #d5a3b1;
-    --ion-color-step-400: #cf98a7;
-    --ion-color-step-450: #c98d9e;
-    --ion-color-step-500: #c48295;
-    --ion-color-step-550: #be778b;
-    --ion-color-step-600: #b86c82;
-    --ion-color-step-650: #b26178;
-    --ion-color-step-700: #ac566f;
-    --ion-color-step-750: #a64b66;
-    --ion-color-step-800: #a03f5c;
-    --ion-color-step-850: #9a3453;
-    --ion-color-step-900: #94294a;
-    --ion-color-step-950: #8e1e40;
-  }
-
-  .ion-color-rose {
-    --ion-color-base: var(--ion-color-rose);
-    --ion-color-base-rgb: var(--ion-color-rose-rgb);
-    --ion-color-contrast: var(--ion-color-rose-contrast);
-    --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
-    --ion-color-shade: var(--ion-color-rose-shade);
-    --ion-color-tint: var(--ion-color-rose-tint);
-  }
-
-  ion-datetime {
-    --background: #fff1f2;
-    --background-rgb: 255, 241, 242;
-
-    border-radius: 16px;
-    box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
-  }
-</style>
-```
diff --git a/static/usage/v8/datetime/theming/react/main_css.md b/static/usage/v8/datetime/theming/react/main_css.md
deleted file mode 100644
index dccf6c7d370..00000000000
--- a/static/usage/v8/datetime/theming/react/main_css.md
+++ /dev/null
@@ -1,50 +0,0 @@
-```css
-:root {
-  --ion-color-rose: #831843;
-  --ion-color-rose-rgb: 131, 24, 67;
-  --ion-color-rose-contrast: #ffffff;
-  --ion-color-rose-contrast-rgb: 255, 255, 255;
-  --ion-color-rose-shade: #73153b;
-  --ion-color-rose-tint: #8f2f56;
-
-  --ion-text-color: #881337;
-  --ion-text-color-rgb: 136, 19, 55;
-
-  --ion-color-step-50: #f9e6e9;
-  --ion-color-step-100: #f3dbdf;
-  --ion-color-step-150: #edd0d6;
-  --ion-color-step-200: #e7c5cd;
-  --ion-color-step-250: #e1bac3;
-  --ion-color-step-300: #dbaeba;
-  --ion-color-step-350: #d5a3b1;
-  --ion-color-step-400: #cf98a7;
-  --ion-color-step-450: #c98d9e;
-  --ion-color-step-500: #c48295;
-  --ion-color-step-550: #be778b;
-  --ion-color-step-600: #b86c82;
-  --ion-color-step-650: #b26178;
-  --ion-color-step-700: #ac566f;
-  --ion-color-step-750: #a64b66;
-  --ion-color-step-800: #a03f5c;
-  --ion-color-step-850: #9a3453;
-  --ion-color-step-900: #94294a;
-  --ion-color-step-950: #8e1e40;
-}
-
-.ion-color-rose {
-  --ion-color-base: var(--ion-color-rose);
-  --ion-color-base-rgb: var(--ion-color-rose-rgb);
-  --ion-color-contrast: var(--ion-color-rose-contrast);
-  --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
-  --ion-color-shade: var(--ion-color-rose-shade);
-  --ion-color-tint: var(--ion-color-rose-tint);
-}
-
-ion-datetime {
-  --background: #fff1f2;
-  --background-rgb: 255, 241, 242;
-
-  border-radius: 16px;
-  box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
-}
-```
diff --git a/static/usage/v8/datetime/theming/react/main_tsx.md b/static/usage/v8/datetime/theming/react/main_tsx.md
deleted file mode 100644
index 37e658cdcd1..00000000000
--- a/static/usage/v8/datetime/theming/react/main_tsx.md
+++ /dev/null
@@ -1,11 +0,0 @@
-```tsx
-import React from 'react';
-import { IonDatetime } from '@ionic/react';
-
-import './main.css';
-
-function Example() {
-  return <IonDatetime color="rose"></IonDatetime>;
-}
-export default Example;
-```
diff --git a/static/usage/v8/datetime/theming/vue.md b/static/usage/v8/datetime/theming/vue.md
deleted file mode 100644
index 32e682cfbc9..00000000000
--- a/static/usage/v8/datetime/theming/vue.md
+++ /dev/null
@@ -1,65 +0,0 @@
-```html
-<template>
-  <ion-datetime color="rose"></ion-datetime>
-</template>
-
-<script lang="ts">
-  import { IonDatetime } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonDatetime },
-  });
-</script>
-
-<style>
-  :root {
-    --ion-color-rose: #831843;
-    --ion-color-rose-rgb: 131, 24, 67;
-    --ion-color-rose-contrast: #ffffff;
-    --ion-color-rose-contrast-rgb: 255, 255, 255;
-    --ion-color-rose-shade: #73153b;
-    --ion-color-rose-tint: #8f2f56;
-
-    --ion-text-color: #881337;
-    --ion-text-color-rgb: 136, 19, 55;
-
-    --ion-color-step-50: #f9e6e9;
-    --ion-color-step-100: #f3dbdf;
-    --ion-color-step-150: #edd0d6;
-    --ion-color-step-200: #e7c5cd;
-    --ion-color-step-250: #e1bac3;
-    --ion-color-step-300: #dbaeba;
-    --ion-color-step-350: #d5a3b1;
-    --ion-color-step-400: #cf98a7;
-    --ion-color-step-450: #c98d9e;
-    --ion-color-step-500: #c48295;
-    --ion-color-step-550: #be778b;
-    --ion-color-step-600: #b86c82;
-    --ion-color-step-650: #b26178;
-    --ion-color-step-700: #ac566f;
-    --ion-color-step-750: #a64b66;
-    --ion-color-step-800: #a03f5c;
-    --ion-color-step-850: #9a3453;
-    --ion-color-step-900: #94294a;
-    --ion-color-step-950: #8e1e40;
-  }
-
-  .ion-color-rose {
-    --ion-color-base: var(--ion-color-rose);
-    --ion-color-base-rgb: var(--ion-color-rose-rgb);
-    --ion-color-contrast: var(--ion-color-rose-contrast);
-    --ion-color-contrast-rgb: var(--ion-color-rose-contrast-rgb);
-    --ion-color-shade: var(--ion-color-rose-shade);
-    --ion-color-tint: var(--ion-color-rose-tint);
-  }
-
-  ion-datetime {
-    --background: #fff1f2;
-    --background-rgb: 255, 241, 242;
-
-    border-radius: 16px;
-    box-shadow: rgba(var(--ion-color-rose-rgb), 0.3) 0px 10px 15px -3px;
-  }
-</style>
-```