diff --git a/core/api.txt b/core/api.txt
index e9d66ed68b8..f0af21eb866 100644
--- a/core/api.txt
+++ b/core/api.txt
@@ -1430,8 +1430,6 @@ ion-toggle,prop,value,null | string | undefined,'on',false,false
 ion-toggle,event,ionBlur,void,true
 ion-toggle,event,ionChange,ToggleChangeEventDetail<any>,true
 ion-toggle,event,ionFocus,void,true
-ion-toggle,css-prop,--background
-ion-toggle,css-prop,--background-checked
 ion-toggle,css-prop,--border-radius
 ion-toggle,css-prop,--handle-background
 ion-toggle,css-prop,--handle-background-checked
@@ -1442,6 +1440,8 @@ ion-toggle,css-prop,--handle-max-height
 ion-toggle,css-prop,--handle-spacing
 ion-toggle,css-prop,--handle-transition
 ion-toggle,css-prop,--handle-width
+ion-toggle,css-prop,--track-background
+ion-toggle,css-prop,--track-background-checked
 ion-toggle,part,handle
 ion-toggle,part,track
 
diff --git a/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-ios-ltr-Mobile-Chrome-linux.png b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-ios-ltr-Mobile-Chrome-linux.png
index b245e4e522e..17f936fc2ed 100644
Binary files a/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-ios-ltr-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-ios-ltr-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-ios-rtl-Mobile-Chrome-linux.png b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-ios-rtl-Mobile-Chrome-linux.png
index 58a45a53eae..11245be85ef 100644
Binary files a/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-ios-rtl-Mobile-Chrome-linux.png and b/core/src/components/toggle/test/item/label.e2e.ts-snapshots/toggle-list-ios-rtl-Mobile-Chrome-linux.png differ
diff --git a/core/src/components/toggle/test/legacy/sizes/index.html b/core/src/components/toggle/test/legacy/sizes/index.html
index 41a037855b2..ae0cb16679d 100644
--- a/core/src/components/toggle/test/legacy/sizes/index.html
+++ b/core/src/components/toggle/test/legacy/sizes/index.html
@@ -149,8 +149,8 @@ <h1>Complex Custom Toggles</h1>
         height: 20px;
         width: 40px;
 
-        --background: #fff;
-        --background-checked: #0366a6;
+        --track-background: #fff;
+        --track-background-checked: #0366a6;
         --handle-background: #bbbbbb;
         --handle-width: 20px;
         --handle-height: 20px;
@@ -172,7 +172,7 @@ <h1>Complex Custom Toggles</h1>
 
         contain: none;
 
-        --background-checked: #d6ffd6;
+        --track-background-checked: #d6ffd6;
 
         --handle-box-shadow: 0 3px 12px rgba(255, 0, 0, 0.6), 0 3px 1px rgba(50, 70, 255, 0.6);
       }
diff --git a/core/src/components/toggle/toggle.scss b/core/src/components/toggle/toggle.scss
index d1755fd5d63..2379280bf86 100644
--- a/core/src/components/toggle/toggle.scss
+++ b/core/src/components/toggle/toggle.scss
@@ -5,8 +5,8 @@
 
 :host {
   /**
-   * @prop --track-background: Background of the toggle
-   * @prop --track-background-checked: Background of the toggle when checked
+   * @prop --track-background: Background of the toggle track
+   * @prop --track-background-checked: Background of the toggle track when checked
    * @prop --border-radius: Border radius of the toggle track
    *
    * @prop --handle-background: Background of the toggle handle
@@ -19,16 +19,6 @@
    * @prop --handle-width: Width of the toggle handle
    * @prop --handle-spacing: Horizontal spacing around the toggle handle
    * @prop --handle-transition: Transition of the toggle handle
-   *
-   * @prop --ripple-color: The color of the ripple effect on MD mode.
-   *
-   * @prop --background: The background color of the component.
-   * @prop --background-activated: Background of component when pressed.
-   * @prop --background-activated-opacity: Opacity of the component background when pressed.
-   * @prop --background-hover: Background of component when hovered.
-   * @prop --background-hover-opacity: Opacity of the component background when hovered.
-   * @prop --background-focused: Background of component when focused.
-   * @prop --background-focused-opacity: Opacity of the component background when focused.
    */
 
   /* stylelint-disable-next-line declaration-no-important */
@@ -48,10 +38,6 @@
   z-index: $z-index-item-input;
 }
 
-:host(:not(.legacy-toggle)) {
-  background: var(--background);
-}
-
 :host(.in-item:not(.legacy-toggle)) {
   width: 100%;
 }