diff --git a/components/lib/themes/aura/toggleswitch/index.js b/components/lib/themes/aura/toggleswitch/index.js
index c62647120..74983d74a 100644
--- a/components/lib/themes/aura/toggleswitch/index.js
+++ b/components/lib/themes/aura/toggleswitch/index.js
@@ -23,8 +23,8 @@ export default {
                 background: '{surface.300}',
                 invalidBackground: '{red.400}',
                 hoverBackground: '{surface.400}',
-                checkedBackground: '{primary.500}',
-                checkedHoverBackground: '{primary.600}'
+                checkedBackground: '{primary.color}',
+                checkedHoverBackground: '{primary.hover.color}'
             },
             handle: {
                 background: '{surface.0}',
@@ -39,8 +39,8 @@ export default {
                 background: '{surface.700}',
                 invalidBackground: '{red.300}',
                 hoverBackground: '{surface.600}',
-                checkedBackground: '{primary.400}',
-                checkedHoverBackground: '{primary.300}'
+                checkedBackground: '{primary.color}',
+                checkedHoverBackground: '{primary.hover.color}'
             },
             handle: {
                 background: '{surface.400}',
diff --git a/components/lib/themes/lara/toggleswitch/index.js b/components/lib/themes/lara/toggleswitch/index.js
index b7d9726ad..157258a56 100644
--- a/components/lib/themes/lara/toggleswitch/index.js
+++ b/components/lib/themes/lara/toggleswitch/index.js
@@ -23,8 +23,8 @@ export default {
                 background: '{surface.300}',
                 invalidBackground: '{red.400}',
                 hoverBackground: '{surface.400}',
-                checkedBackground: '{primary.500}',
-                checkedHoverBackground: '{primary.600}'
+                checkedBackground: '{primary.color}',
+                checkedHoverBackground: '{primary.hover.color}'
             },
             handle: {
                 background: '{surface.0}',
@@ -39,8 +39,8 @@ export default {
                 background: '{surface.700}',
                 invalidBackground: '{red.300}',
                 hoverBackground: '{surface.600}',
-                checkedBackground: '{primary.400}',
-                checkedHoverBackground: '{primary.300}'
+                checkedBackground: '{primary.color}',
+                checkedHoverBackground: '{primary.hover.color}'
             },
             handle: {
                 background: '{surface.400}',