diff --git a/static/usage/v8/theming/always-dark-mode/demo.html b/static/usage/v8/theming/always-dark-mode/demo.html
index c0359997458..a9ccdef3515 100644
--- a/static/usage/v8/theming/always-dark-mode/demo.html
+++ b/static/usage/v8/theming/always-dark-mode/demo.html
@@ -61,19 +61,19 @@
     <style>
       /* This sets a different item border color for the default theme on ios and md */
       :root {
-        --ion-item-border-color: var(--ion-color-step-200);
+        --ion-item-border-color: var(--ion-background-color-step-200);
       }
 
       /* This sets a different background and item background for the default theme on ios */
       :root.ios {
-        --ion-background-color: var(--ion-color-step-50);
+        --ion-background-color: var(--ion-background-color-step-50);
         --ion-toolbar-background: var(--ion-background-color);
         --ion-item-background: #1c1c1d;
       }
 
       /* This sets a different background and item background for the default theme on md */
       :root.md {
-        --ion-background-color: var(--ion-color-step-100);
+        --ion-background-color: var(--ion-background-color-step-100);
         --ion-toolbar-background: var(--ion-background-color);
         --ion-item-background: #1c1c1d;
       }
diff --git a/static/usage/v8/theming/class-dark-mode/demo.html b/static/usage/v8/theming/class-dark-mode/demo.html
index 4f883848f1a..a9810a5142b 100644
--- a/static/usage/v8/theming/class-dark-mode/demo.html
+++ b/static/usage/v8/theming/class-dark-mode/demo.html
@@ -123,19 +123,19 @@
 
       /* This sets a different item border color for the default theme on ios and md */
       :root {
-        --ion-item-border-color: var(--ion-color-step-200);
+        --ion-item-border-color: var(--ion-background-color-step-200);
       }
 
       /* This sets a different background and item background for the default theme on ios */
       :root.ios {
-        --ion-background-color: var(--ion-color-step-50, #f2f2f6);
+        --ion-background-color: var(--ion-background-color-step-50, #f2f2f6);
         --ion-toolbar-background: var(--ion-background-color);
         --ion-item-background: #fff;
       }
 
       /* This sets a different background and item background for the default theme on md */
       :root.md {
-        --ion-background-color: var(--ion-color-step-100, #f9f9f9);
+        --ion-background-color: var(--ion-background-color-step-100, #f9f9f9);
         --ion-toolbar-background: var(--ion-background-color);
         --ion-item-background: #fff;
       }
diff --git a/static/usage/v8/theming/system-dark-mode/demo.html b/static/usage/v8/theming/system-dark-mode/demo.html
index 54d6e6f059f..61e8fc8da24 100644
--- a/static/usage/v8/theming/system-dark-mode/demo.html
+++ b/static/usage/v8/theming/system-dark-mode/demo.html
@@ -66,19 +66,19 @@
 
       /* This sets a different item border color for the default theme on ios and md */
       :root {
-        --ion-item-border-color: var(--ion-color-step-200);
+        --ion-item-border-color: var(--ion-background-color-step-200);
       }
 
       /* This sets a different background and item background for the default theme on ios */
       :root.ios {
-        --ion-background-color: var(--ion-color-step-50, #f2f2f6);
+        --ion-background-color: var(--ion-background-color-step-50, #f2f2f6);
         --ion-toolbar-background: var(--ion-background-color);
         --ion-item-background: #fff;
       }
 
       /* This sets a different background and item background for the default theme on md */
       :root.md {
-        --ion-background-color: var(--ion-color-step-100, #f9f9f9);
+        --ion-background-color: var(--ion-background-color-step-100, #f9f9f9);
         --ion-toolbar-background: var(--ion-background-color);
         --ion-item-background: #fff;
       }