diff --git a/packages/themes/src/presets/aura/toggleswitch/index.js b/packages/themes/src/presets/aura/toggleswitch/index.js
index 6fa3d9901..0d89a5479 100644
--- a/packages/themes/src/presets/aura/toggleswitch/index.js
+++ b/packages/themes/src/presets/aura/toggleswitch/index.js
@@ -19,24 +19,24 @@ export default {
         checkedHoverBorderColor: 'transparent',
         invalidBorderColor: '{form.field.invalid.border.color}',
         transitionDuration: '{form.field.transition.duration}',
-        slideDuration: '0.2s',
-        disabledBackground: '{form.field.disabled.background}'
+        slideDuration: '0.2s'
     },
     handle: {
         borderRadius: '50%',
-        size: '1rem',
-        disabledBackground: '{form.field.disabled.color}'
+        size: '1rem'
     },
     colorScheme: {
         light: {
             root: {
                 background: '{surface.300}',
+                disabledBackground: '{form.field.disabled.background}',
                 hoverBackground: '{surface.400}',
                 checkedBackground: '{primary.color}',
                 checkedHoverBackground: '{primary.hover.color}'
             },
             handle: {
                 background: '{surface.0}',
+                disabledBackground: '{form.field.disabled.color}',
                 hoverBackground: '{surface.0}',
                 checkedBackground: '{surface.0}',
                 checkedHoverBackground: '{surface.0}',
@@ -49,12 +49,14 @@ export default {
         dark: {
             root: {
                 background: '{surface.700}',
+                disabledBackground: '{surface.600}',
                 hoverBackground: '{surface.600}',
                 checkedBackground: '{primary.color}',
                 checkedHoverBackground: '{primary.hover.color}'
             },
             handle: {
                 background: '{surface.400}',
+                disabledBackground: '{surface.900}',
                 hoverBackground: '{surface.300}',
                 checkedBackground: '{surface.900}',
                 checkedHoverBackground: '{surface.900}',
diff --git a/packages/themes/src/presets/lara/toggleswitch/index.js b/packages/themes/src/presets/lara/toggleswitch/index.js
index 0ff04ade5..a1ae68ad6 100644
--- a/packages/themes/src/presets/lara/toggleswitch/index.js
+++ b/packages/themes/src/presets/lara/toggleswitch/index.js
@@ -19,24 +19,24 @@ export default {
         checkedHoverBorderColor: 'transparent',
         invalidBorderColor: '{form.field.invalid.border.color}',
         transitionDuration: '{form.field.transition.duration}',
-        slideDuration: '0.2s',
-        disabledBackground: '{form.field.disabled.background}'
+        slideDuration: '0.2s'
     },
     handle: {
         borderRadius: '50%',
-        size: '1.25rem',
-        disabledBackground: '{form.field.disabled.color}'
+        size: '1.25rem'
     },
     colorScheme: {
         light: {
             root: {
                 background: '{surface.300}',
+                disabledBackground: '{form.field.disabled.background}',
                 hoverBackground: '{surface.400}',
                 checkedBackground: '{primary.color}',
                 checkedHoverBackground: '{primary.hover.color}'
             },
             handle: {
                 background: '{surface.0}',
+                disabledBackground: '{form.field.disabled.color}',
                 hoverBackground: '{surface.0}',
                 checkedBackground: '{surface.0}',
                 checkedHoverBackground: '{surface.0}',
@@ -49,12 +49,14 @@ export default {
         dark: {
             root: {
                 background: '{surface.700}',
+                disabledBackground: '{surface.600}',
                 hoverBackground: '{surface.600}',
                 checkedBackground: '{primary.color}',
                 checkedHoverBackground: '{primary.hover.color}'
             },
             handle: {
                 background: '{surface.400}',
+                disabledBackground: '{surface.900}',
                 hoverBackground: '{surface.300}',
                 checkedBackground: '{surface.900}',
                 checkedHoverBackground: '{surface.900}',
diff --git a/packages/themes/src/presets/material/toggleswitch/index.js b/packages/themes/src/presets/material/toggleswitch/index.js
index 3a60048e2..da0cd7cb5 100644
--- a/packages/themes/src/presets/material/toggleswitch/index.js
+++ b/packages/themes/src/presets/material/toggleswitch/index.js
@@ -19,24 +19,24 @@ export default {
         checkedHoverBorderColor: 'transparent',
         invalidBorderColor: '{form.field.invalid.border.color}',
         transitionDuration: '{form.field.transition.duration}',
-        slideDuration: '0.2s',
-        disabledBackground: '{form.field.disabled.background}'
+        slideDuration: '0.2s'
     },
     handle: {
         borderRadius: '50%',
-        size: '1.5rem',
-        disabledBackground: '{form.field.disabled.color}'
+        size: '1.5rem'
     },
     colorScheme: {
         light: {
             root: {
                 background: '{surface.300}',
+                disabledBackground: '{surface.400}',
                 hoverBackground: '{surface.300}',
                 checkedBackground: '{primary.200}',
                 checkedHoverBackground: '{primary.200}'
             },
             handle: {
                 background: '{surface.0}',
+                disabledBackground: '{surface.200}',
                 hoverBackground: '{surface.0}',
                 checkedBackground: '{primary.color}',
                 checkedHoverBackground: '{primary.color}',
@@ -49,12 +49,14 @@ export default {
         dark: {
             root: {
                 background: '{surface.700}',
+                disabledBackground: '{surface.600}',
                 hoverBackground: '{surface.700}',
                 checkedBackground: '{primary.color}',
                 checkedHoverBackground: '{primary.color}'
             },
             handle: {
                 background: '{surface.400}',
+                disabledBackground: '{surface.500}',
                 hoverBackground: '{surface.300}',
                 checkedBackground: '{primary.200}',
                 checkedHoverBackground: '{primary.200}',