diff --git a/css/blau.css b/css/blau.css
index e54d1f25f..4418c501e 100644
--- a/css/blau.css
+++ b/css/blau.css
@@ -110,11 +110,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-blau-white);
     --mistica-color-controlError: var(--mistica-blau-blauRed);
     --mistica-color-barTrack: var(--mistica-blau-grey2);
+    --mistica-color-barTrackInverse: rgba(var(--mistica-blau-raw-grey6), 0.2);
     --mistica-color-loadingBar: var(--mistica-blau-blauBlueSecondary);
     --mistica-color-loadingBarBackground: var(--mistica-blau-blauBlueSecondary10);
     --mistica-color-toggleAndroidInactive: var(--mistica-blau-grey2);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-blau-blauBlueSecondary10);
     --mistica-color-iosControlKnob: var(--mistica-blau-white);
+    --mistica-color-controlKnobInverse: var(--mistica-blau-blauBlueSecondary);
     --mistica-color-divider: var(--mistica-blau-grey2);
     --mistica-color-dividerInverse: rgba(var(--mistica-blau-raw-white), 0.2);
     --mistica-color-navigationBarDivider: var(--mistica-blau-blauBluePrimary);
@@ -304,11 +306,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-blau-blauBlueSecondary);
     --mistica-color-controlError: var(--mistica-blau-blauRed);
     --mistica-color-barTrack: var(--mistica-blau-darkModeGrey6);
+    --mistica-color-barTrackInverse: var(--mistica-blau-darkModeGrey6);
     --mistica-color-loadingBar: var(--mistica-blau-blauBluePrimary);
     --mistica-color-loadingBarBackground: var(--mistica-blau-darkModeGrey);
     --mistica-color-toggleAndroidInactive: var(--mistica-blau-grey5);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-blau-blauBlueSecondary30);
     --mistica-color-iosControlKnob: var(--mistica-blau-grey2);
+    --mistica-color-controlKnobInverse: var(--mistica-blau-grey2);
     --mistica-color-divider: rgba(var(--mistica-blau-raw-white), 0.05);
     --mistica-color-dividerInverse: rgba(var(--mistica-blau-raw-white), 0.05);
     --mistica-color-navigationBarDivider: var(--mistica-blau-darkModeBlack);
@@ -446,11 +450,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-blau-blauBlueSecondary);
         --mistica-color-controlError: var(--mistica-blau-blauRed);
         --mistica-color-barTrack: var(--mistica-blau-darkModeGrey6);
+        --mistica-color-barTrackInverse: var(--mistica-blau-darkModeGrey6);
         --mistica-color-loadingBar: var(--mistica-blau-blauBluePrimary);
         --mistica-color-loadingBarBackground: var(--mistica-blau-darkModeGrey);
         --mistica-color-toggleAndroidInactive: var(--mistica-blau-grey5);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-blau-blauBlueSecondary30);
         --mistica-color-iosControlKnob: var(--mistica-blau-grey2);
+        --mistica-color-controlKnobInverse: var(--mistica-blau-grey2);
         --mistica-color-divider: rgba(var(--mistica-blau-raw-white), 0.05);
         --mistica-color-dividerInverse: rgba(var(--mistica-blau-raw-white), 0.05);
         --mistica-color-navigationBarDivider: var(--mistica-blau-darkModeBlack);
@@ -584,11 +590,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-blau-white);
         --mistica-color-controlError: var(--mistica-blau-blauRed);
         --mistica-color-barTrack: var(--mistica-blau-grey2);
+        --mistica-color-barTrackInverse: rgba(var(--mistica-blau-raw-grey6), 0.2);
         --mistica-color-loadingBar: var(--mistica-blau-blauBlueSecondary);
         --mistica-color-loadingBarBackground: var(--mistica-blau-blauBlueSecondary10);
         --mistica-color-toggleAndroidInactive: var(--mistica-blau-grey2);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-blau-blauBlueSecondary10);
         --mistica-color-iosControlKnob: var(--mistica-blau-white);
+        --mistica-color-controlKnobInverse: var(--mistica-blau-blauBlueSecondary);
         --mistica-color-divider: var(--mistica-blau-grey2);
         --mistica-color-dividerInverse: rgba(var(--mistica-blau-raw-white), 0.2);
         --mistica-color-navigationBarDivider: var(--mistica-blau-blauBluePrimary);
diff --git a/css/movistar.css b/css/movistar.css
index a7a6a6e1f..584c3e612 100644
--- a/css/movistar.css
+++ b/css/movistar.css
@@ -124,11 +124,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-movistar-white);
     --mistica-color-controlError: var(--mistica-movistar-pepper55);
     --mistica-color-barTrack: var(--mistica-movistar-grey3);
+    --mistica-color-barTrackInverse: rgba(var(--mistica-movistar-raw-black), 0.14);
     --mistica-color-loadingBar: var(--mistica-movistar-movistarBlue);
     --mistica-color-loadingBarBackground: var(--mistica-movistar-grey2);
     --mistica-color-toggleAndroidInactive: var(--mistica-movistar-grey2);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-movistar-movistarBlue20);
     --mistica-color-iosControlKnob: var(--mistica-movistar-white);
+    --mistica-color-controlKnobInverse: var(--mistica-movistar-movistarBlue);
     --mistica-color-divider: var(--mistica-movistar-grey3);
     --mistica-color-dividerInverse: rgba(var(--mistica-movistar-raw-white), 0.2);
     --mistica-color-navigationBarDivider: var(--mistica-movistar-movistarBlue);
@@ -318,11 +320,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-movistar-movistarBlue);
     --mistica-color-controlError: var(--mistica-movistar-pepper45);
     --mistica-color-barTrack: var(--mistica-movistar-darkModeGrey6);
+    --mistica-color-barTrackInverse: var(--mistica-movistar-darkModeGrey6);
     --mistica-color-loadingBar: var(--mistica-movistar-movistarBlue);
     --mistica-color-loadingBarBackground: var(--mistica-movistar-darkModeGrey6);
     --mistica-color-toggleAndroidInactive: var(--mistica-movistar-darkModeGrey2);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-movistar-movistarBlue20);
     --mistica-color-iosControlKnob: var(--mistica-movistar-darkModeGrey2);
+    --mistica-color-controlKnobInverse: var(--mistica-movistar-darkModeGrey2);
     --mistica-color-divider: rgba(var(--mistica-movistar-raw-white), 0.1);
     --mistica-color-dividerInverse: rgba(var(--mistica-movistar-raw-white), 0.1);
     --mistica-color-navigationBarDivider: var(--mistica-movistar-darkModeBlack);
@@ -463,11 +467,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-movistar-movistarBlue);
         --mistica-color-controlError: var(--mistica-movistar-pepper45);
         --mistica-color-barTrack: var(--mistica-movistar-darkModeGrey6);
+        --mistica-color-barTrackInverse: var(--mistica-movistar-darkModeGrey6);
         --mistica-color-loadingBar: var(--mistica-movistar-movistarBlue);
         --mistica-color-loadingBarBackground: var(--mistica-movistar-darkModeGrey6);
         --mistica-color-toggleAndroidInactive: var(--mistica-movistar-darkModeGrey2);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-movistar-movistarBlue20);
         --mistica-color-iosControlKnob: var(--mistica-movistar-darkModeGrey2);
+        --mistica-color-controlKnobInverse: var(--mistica-movistar-darkModeGrey2);
         --mistica-color-divider: rgba(var(--mistica-movistar-raw-white), 0.1);
         --mistica-color-dividerInverse: rgba(var(--mistica-movistar-raw-white), 0.1);
         --mistica-color-navigationBarDivider: var(--mistica-movistar-darkModeBlack);
@@ -601,11 +607,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-movistar-white);
         --mistica-color-controlError: var(--mistica-movistar-pepper55);
         --mistica-color-barTrack: var(--mistica-movistar-grey3);
+        --mistica-color-barTrackInverse: rgba(var(--mistica-movistar-raw-black), 0.14);
         --mistica-color-loadingBar: var(--mistica-movistar-movistarBlue);
         --mistica-color-loadingBarBackground: var(--mistica-movistar-grey2);
         --mistica-color-toggleAndroidInactive: var(--mistica-movistar-grey2);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-movistar-movistarBlue20);
         --mistica-color-iosControlKnob: var(--mistica-movistar-white);
+        --mistica-color-controlKnobInverse: var(--mistica-movistar-movistarBlue);
         --mistica-color-divider: var(--mistica-movistar-grey3);
         --mistica-color-dividerInverse: rgba(var(--mistica-movistar-raw-white), 0.2);
         --mistica-color-navigationBarDivider: var(--mistica-movistar-movistarBlue);
diff --git a/css/o2-new.css b/css/o2-new.css
index 560e85760..e920066a3 100644
--- a/css/o2-new.css
+++ b/css/o2-new.css
@@ -124,11 +124,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-o2-new-white);
     --mistica-color-controlError: var(--mistica-o2-new-o2Red60);
     --mistica-color-barTrack: var(--mistica-o2-new-grey30);
+    --mistica-color-barTrackInverse: rgba(var(--mistica-o2-new-raw-white), 0.3);
     --mistica-color-loadingBar: var(--mistica-o2-new-beyondBlue);
     --mistica-color-loadingBarBackground: var(--mistica-o2-new-grey20);
     --mistica-color-toggleAndroidInactive: var(--mistica-o2-new-grey30);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-new-beyondBlue15);
     --mistica-color-iosControlKnob: var(--mistica-o2-new-white);
+    --mistica-color-controlKnobInverse: var(--mistica-o2-new-beyondBlue);
     --mistica-color-divider: var(--mistica-o2-new-grey30);
     --mistica-color-dividerInverse: rgba(var(--mistica-o2-new-raw-white), 0.2);
     --mistica-color-navigationBarDivider: var(--mistica-o2-new-darkBlue);
@@ -318,11 +320,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-o2-new-darkModeBeyondBlue);
     --mistica-color-controlError: var(--mistica-o2-new-o2Red45);
     --mistica-color-barTrack: var(--mistica-o2-new-darkModeGrey6);
+    --mistica-color-barTrackInverse: var(--mistica-o2-new-darkModeGrey6);
     --mistica-color-loadingBar: var(--mistica-o2-new-darkModeBeyondBlue);
     --mistica-color-loadingBarBackground: var(--mistica-o2-new-darkModeGrey6);
     --mistica-color-toggleAndroidInactive: var(--mistica-o2-new-grey20);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-new-beyondBlue15);
     --mistica-color-iosControlKnob: var(--mistica-o2-new-grey30);
+    --mistica-color-controlKnobInverse: var(--mistica-o2-new-grey30);
     --mistica-color-badge: var(--mistica-o2-new-o2Red65);
     --mistica-color-feedbackErrorBackground: var(--mistica-o2-new-o2Red60);
     --mistica-color-feedbackInfoBackground: var(--mistica-o2-new-darkModeGrey6);
@@ -457,11 +461,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-o2-new-darkModeBeyondBlue);
         --mistica-color-controlError: var(--mistica-o2-new-o2Red45);
         --mistica-color-barTrack: var(--mistica-o2-new-darkModeGrey6);
+        --mistica-color-barTrackInverse: var(--mistica-o2-new-darkModeGrey6);
         --mistica-color-loadingBar: var(--mistica-o2-new-darkModeBeyondBlue);
         --mistica-color-loadingBarBackground: var(--mistica-o2-new-darkModeGrey6);
         --mistica-color-toggleAndroidInactive: var(--mistica-o2-new-grey20);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-new-beyondBlue15);
         --mistica-color-iosControlKnob: var(--mistica-o2-new-grey30);
+        --mistica-color-controlKnobInverse: var(--mistica-o2-new-grey30);
         --mistica-color-badge: var(--mistica-o2-new-o2Red65);
         --mistica-color-feedbackErrorBackground: var(--mistica-o2-new-o2Red60);
         --mistica-color-feedbackInfoBackground: var(--mistica-o2-new-darkModeGrey6);
@@ -605,11 +611,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-o2-new-white);
         --mistica-color-controlError: var(--mistica-o2-new-o2Red60);
         --mistica-color-barTrack: var(--mistica-o2-new-grey30);
+        --mistica-color-barTrackInverse: rgba(var(--mistica-o2-new-raw-white), 0.3);
         --mistica-color-loadingBar: var(--mistica-o2-new-beyondBlue);
         --mistica-color-loadingBarBackground: var(--mistica-o2-new-grey20);
         --mistica-color-toggleAndroidInactive: var(--mistica-o2-new-grey30);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-new-beyondBlue15);
         --mistica-color-iosControlKnob: var(--mistica-o2-new-white);
+        --mistica-color-controlKnobInverse: var(--mistica-o2-new-beyondBlue);
         --mistica-color-badge: var(--mistica-o2-new-o2Red65);
         --mistica-color-feedbackErrorBackground: var(--mistica-o2-new-o2Red60);
         --mistica-color-feedbackInfoBackground: var(--mistica-o2-new-black);
diff --git a/css/o2.css b/css/o2.css
index 466d930df..9ef7986df 100644
--- a/css/o2.css
+++ b/css/o2.css
@@ -110,11 +110,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-o2-white);
     --mistica-color-controlError: var(--mistica-o2-pepper);
     --mistica-color-barTrack: var(--mistica-o2-grey3);
+    --mistica-color-barTrackInverse: rgba(var(--mistica-o2-raw-white), 0.3);
     --mistica-color-loadingBar: var(--mistica-o2-o2BluePrimary);
     --mistica-color-loadingBarBackground: var(--mistica-o2-grey1);
     --mistica-color-toggleAndroidInactive: var(--mistica-o2-grey2);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-o2BluePrimary15);
     --mistica-color-iosControlKnob: var(--mistica-o2-white);
+    --mistica-color-controlKnobInverse: var(--mistica-o2-o2BluePrimary);
     --mistica-color-divider: var(--mistica-o2-grey2);
     --mistica-color-dividerInverse: rgba(var(--mistica-o2-raw-white), 0.2);
     --mistica-color-navigationBarDivider: var(--mistica-o2-o2BluePrimary);
@@ -304,11 +306,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-o2-o2BluePrimary30);
     --mistica-color-controlError: var(--mistica-o2-pepper);
     --mistica-color-barTrack: var(--mistica-o2-darkModeGrey6);
+    --mistica-color-barTrackInverse: var(--mistica-o2-darkModeGrey6);
     --mistica-color-loadingBar: var(--mistica-o2-darkModeO2BluePrimary);
     --mistica-color-loadingBarBackground: var(--mistica-o2-darkModeGrey6);
     --mistica-color-toggleAndroidInactive: var(--mistica-o2-grey4);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-o2BlueLight30);
     --mistica-color-iosControlKnob: var(--mistica-o2-grey2);
+    --mistica-color-controlKnobInverse: var(--mistica-o2-grey2);
     --mistica-color-badge: var(--mistica-o2-pepper60);
     --mistica-color-feedbackErrorBackground: var(--mistica-o2-pepper);
     --mistica-color-feedbackInfoBackground: var(--mistica-o2-darkModeGrey6);
@@ -443,11 +447,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-o2-o2BluePrimary30);
         --mistica-color-controlError: var(--mistica-o2-pepper);
         --mistica-color-barTrack: var(--mistica-o2-darkModeGrey6);
+        --mistica-color-barTrackInverse: var(--mistica-o2-darkModeGrey6);
         --mistica-color-loadingBar: var(--mistica-o2-darkModeO2BluePrimary);
         --mistica-color-loadingBarBackground: var(--mistica-o2-darkModeGrey6);
         --mistica-color-toggleAndroidInactive: var(--mistica-o2-grey4);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-o2BlueLight30);
         --mistica-color-iosControlKnob: var(--mistica-o2-grey2);
+        --mistica-color-controlKnobInverse: var(--mistica-o2-grey2);
         --mistica-color-badge: var(--mistica-o2-pepper60);
         --mistica-color-feedbackErrorBackground: var(--mistica-o2-pepper);
         --mistica-color-feedbackInfoBackground: var(--mistica-o2-darkModeGrey6);
@@ -581,11 +587,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-o2-white);
         --mistica-color-controlError: var(--mistica-o2-pepper);
         --mistica-color-barTrack: var(--mistica-o2-grey3);
+        --mistica-color-barTrackInverse: rgba(var(--mistica-o2-raw-white), 0.3);
         --mistica-color-loadingBar: var(--mistica-o2-o2BluePrimary);
         --mistica-color-loadingBarBackground: var(--mistica-o2-grey1);
         --mistica-color-toggleAndroidInactive: var(--mistica-o2-grey2);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-o2-o2BluePrimary15);
         --mistica-color-iosControlKnob: var(--mistica-o2-white);
+        --mistica-color-controlKnobInverse: var(--mistica-o2-o2BluePrimary);
         --mistica-color-badge: var(--mistica-o2-pepper60);
         --mistica-color-feedbackErrorBackground: var(--mistica-o2-pepper);
         --mistica-color-feedbackInfoBackground: var(--mistica-o2-grey6);
diff --git a/css/telefonica.css b/css/telefonica.css
index 108c7c809..9547b353e 100644
--- a/css/telefonica.css
+++ b/css/telefonica.css
@@ -110,12 +110,14 @@
     --mistica-color-controlInverse: var(--mistica-telefonica-grey1);
     --mistica-color-controlActivatedInverse: var(--mistica-telefonica-white);
     --mistica-color-controlError: var(--mistica-telefonica-coral);
-    --mistica-color-barTrack: var(--mistica-telefonica-grey3);
+    --mistica-color-barTrack: var(--mistica-telefonica-grey2);
+    --mistica-color-barTrackInverse: rgba(var(--mistica-telefonica-raw-white), 0.3);
     --mistica-color-loadingBar: var(--mistica-telefonica-telefonicaBlue30);
     --mistica-color-loadingBarBackground: var(--mistica-telefonica-telefonicaBlue70);
     --mistica-color-toggleAndroidInactive: var(--mistica-telefonica-grey2);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-telefonica-grey2);
     --mistica-color-iosControlKnob: var(--mistica-telefonica-white);
+    --mistica-color-controlKnobInverse: var(--mistica-telefonica-telefonicaBlue);
     --mistica-color-divider: var(--mistica-telefonica-grey2);
     --mistica-color-dividerInverse: rgba(var(--mistica-telefonica-raw-white), 0.2);
     --mistica-color-navigationBarDivider: var(--mistica-telefonica-telefonicaBlue);
@@ -305,11 +307,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-telefonica-telefonicaBlue);
     --mistica-color-controlError: var(--mistica-telefonica-coral);
     --mistica-color-barTrack: var(--mistica-telefonica-darkModeGrey6);
+    --mistica-color-barTrackInverse: var(--mistica-telefonica-darkModeGrey6);
     --mistica-color-loadingBar: var(--mistica-telefonica-telefonicaBlue);
     --mistica-color-loadingBarBackground: var(--mistica-telefonica-grey6);
     --mistica-color-toggleAndroidInactive: var(--mistica-telefonica-grey4);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-telefonica-telefonicaBlue20);
     --mistica-color-iosControlKnob: var(--mistica-telefonica-grey2);
+    --mistica-color-controlKnobInverse: var(--mistica-telefonica-grey2);
     --mistica-color-divider: rgba(var(--mistica-telefonica-raw-white), 0.05);
     --mistica-color-dividerInverse: rgba(var(--mistica-telefonica-raw-white), 0.05);
     --mistica-color-navigationBarDivider: var(--mistica-telefonica-darkModeBlack);
@@ -453,11 +457,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-telefonica-telefonicaBlue);
         --mistica-color-controlError: var(--mistica-telefonica-coral);
         --mistica-color-barTrack: var(--mistica-telefonica-darkModeGrey6);
+        --mistica-color-barTrackInverse: var(--mistica-telefonica-darkModeGrey6);
         --mistica-color-loadingBar: var(--mistica-telefonica-telefonicaBlue);
         --mistica-color-loadingBarBackground: var(--mistica-telefonica-grey6);
         --mistica-color-toggleAndroidInactive: var(--mistica-telefonica-grey4);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-telefonica-telefonicaBlue20);
         --mistica-color-iosControlKnob: var(--mistica-telefonica-grey2);
+        --mistica-color-controlKnobInverse: var(--mistica-telefonica-grey2);
         --mistica-color-divider: rgba(var(--mistica-telefonica-raw-white), 0.05);
         --mistica-color-dividerInverse: rgba(var(--mistica-telefonica-raw-white), 0.05);
         --mistica-color-navigationBarDivider: var(--mistica-telefonica-darkModeBlack);
@@ -596,12 +602,14 @@
         --mistica-color-controlInverse: var(--mistica-telefonica-grey1);
         --mistica-color-controlActivatedInverse: var(--mistica-telefonica-white);
         --mistica-color-controlError: var(--mistica-telefonica-coral);
-        --mistica-color-barTrack: var(--mistica-telefonica-grey3);
+        --mistica-color-barTrack: var(--mistica-telefonica-grey2);
+        --mistica-color-barTrackInverse: rgba(var(--mistica-telefonica-raw-white), 0.3);
         --mistica-color-loadingBar: var(--mistica-telefonica-telefonicaBlue30);
         --mistica-color-loadingBarBackground: var(--mistica-telefonica-telefonicaBlue70);
         --mistica-color-toggleAndroidInactive: var(--mistica-telefonica-grey2);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-telefonica-grey2);
         --mistica-color-iosControlKnob: var(--mistica-telefonica-white);
+        --mistica-color-controlKnobInverse: var(--mistica-telefonica-telefonicaBlue);
         --mistica-color-divider: var(--mistica-telefonica-grey2);
         --mistica-color-dividerInverse: rgba(var(--mistica-telefonica-raw-white), 0.2);
         --mistica-color-navigationBarDivider: var(--mistica-telefonica-telefonicaBlue);
diff --git a/css/tu.css b/css/tu.css
index 69e45ec48..951f8e45d 100644
--- a/css/tu.css
+++ b/css/tu.css
@@ -113,11 +113,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-tu-white);
     --mistica-color-controlError: var(--mistica-tu-red);
     --mistica-color-barTrack: var(--mistica-tu-grey2);
+    --mistica-color-barTrackInverse: rgba(var(--mistica-tu-raw-white), 0.36);
     --mistica-color-loadingBar: var(--mistica-tu-green40);
     --mistica-color-loadingBarBackground: var(--mistica-tu-green);
     --mistica-color-toggleAndroidInactive: var(--mistica-tu-grey2);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-tu-primary15);
     --mistica-color-iosControlKnob: var(--mistica-tu-white);
+    --mistica-color-controlKnobInverse: var(--mistica-tu-primary);
     --mistica-color-divider: var(--mistica-tu-grey2);
     --mistica-color-dividerInverse: rgba(var(--mistica-tu-raw-white), 0.2);
     --mistica-color-navigationBarDivider: var(--mistica-tu-primary);
@@ -307,11 +309,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-tu-blue30);
     --mistica-color-controlError: var(--mistica-tu-red);
     --mistica-color-barTrack: var(--mistica-tu-darkModeGrey6);
+    --mistica-color-barTrackInverse: var(--mistica-tu-darkModeGrey6);
     --mistica-color-loadingBar: var(--mistica-tu-green40);
     --mistica-color-loadingBarBackground: var(--mistica-tu-green);
     --mistica-color-toggleAndroidInactive: var(--mistica-tu-grey4);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-tu-blue20);
     --mistica-color-iosControlKnob: var(--mistica-tu-grey2);
+    --mistica-color-controlKnobInverse: var(--mistica-tu-grey2);
     --mistica-color-divider: rgba(var(--mistica-tu-raw-white), 0.05);
     --mistica-color-dividerInverse: rgba(var(--mistica-tu-raw-white), 0.05);
     --mistica-color-navigationBarDivider: var(--mistica-tu-darkModeBlack);
@@ -446,11 +450,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-tu-blue30);
         --mistica-color-controlError: var(--mistica-tu-red);
         --mistica-color-barTrack: var(--mistica-tu-darkModeGrey6);
+        --mistica-color-barTrackInverse: var(--mistica-tu-darkModeGrey6);
         --mistica-color-loadingBar: var(--mistica-tu-green40);
         --mistica-color-loadingBarBackground: var(--mistica-tu-green);
         --mistica-color-toggleAndroidInactive: var(--mistica-tu-grey4);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-tu-blue20);
         --mistica-color-iosControlKnob: var(--mistica-tu-grey2);
+        --mistica-color-controlKnobInverse: var(--mistica-tu-grey2);
         --mistica-color-divider: rgba(var(--mistica-tu-raw-white), 0.05);
         --mistica-color-dividerInverse: rgba(var(--mistica-tu-raw-white), 0.05);
         --mistica-color-navigationBarDivider: var(--mistica-tu-darkModeBlack);
@@ -584,11 +590,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-tu-white);
         --mistica-color-controlError: var(--mistica-tu-red);
         --mistica-color-barTrack: var(--mistica-tu-grey2);
+        --mistica-color-barTrackInverse: rgba(var(--mistica-tu-raw-white), 0.36);
         --mistica-color-loadingBar: var(--mistica-tu-green40);
         --mistica-color-loadingBarBackground: var(--mistica-tu-green);
         --mistica-color-toggleAndroidInactive: var(--mistica-tu-grey2);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-tu-primary15);
         --mistica-color-iosControlKnob: var(--mistica-tu-white);
+        --mistica-color-controlKnobInverse: var(--mistica-tu-primary);
         --mistica-color-divider: var(--mistica-tu-grey2);
         --mistica-color-dividerInverse: rgba(var(--mistica-tu-raw-white), 0.2);
         --mistica-color-navigationBarDivider: var(--mistica-tu-primary);
diff --git a/css/vivo-new.css b/css/vivo-new.css
index f234313fa..2d7c67e48 100644
--- a/css/vivo-new.css
+++ b/css/vivo-new.css
@@ -105,11 +105,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-vivo-new-white);
     --mistica-color-controlError: var(--mistica-vivo-new-pepper);
     --mistica-color-barTrack: var(--mistica-vivo-new-grey3);
+    --mistica-color-barTrackInverse: rgba(var(--mistica-vivo-new-raw-white), 0.5);
     --mistica-color-loadingBar: var(--mistica-vivo-new-vivoPurple);
     --mistica-color-loadingBarBackground: var(--mistica-vivo-new-vivoPurpleLight10);
     --mistica-color-toggleAndroidInactive: var(--mistica-vivo-new-grey2);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-vivo-new-vivoPurpleLight20);
     --mistica-color-iosControlKnob: var(--mistica-vivo-new-white);
+    --mistica-color-controlKnobInverse: var(--mistica-vivo-new-vivoPurple);
     --mistica-color-divider: var(--mistica-vivo-new-grey3);
     --mistica-color-dividerInverse: rgba(var(--mistica-vivo-new-raw-white), 0.2);
     --mistica-color-navigationBarDivider: var(--mistica-vivo-new-vivoPurple);
@@ -299,11 +301,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-vivo-new-vivoPurpleLight80);
     --mistica-color-controlError: var(--mistica-vivo-new-pepper);
     --mistica-color-barTrack: var(--mistica-vivo-new-darkModeGrey6);
+    --mistica-color-barTrackInverse: var(--mistica-vivo-new-darkModeGrey6);
     --mistica-color-loadingBar: var(--mistica-vivo-new-vivoPurpleLight80);
     --mistica-color-loadingBarBackground: var(--mistica-vivo-new-darkModeGrey6);
     --mistica-color-toggleAndroidInactive: var(--mistica-vivo-new-grey4);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-vivo-new-vivoPurpleLight50);
     --mistica-color-iosControlKnob: var(--mistica-vivo-new-grey2);
+    --mistica-color-controlKnobInverse: var(--mistica-vivo-new-grey2);
     --mistica-color-divider: rgba(var(--mistica-vivo-new-raw-white), 0.05);
     --mistica-color-dividerInverse: rgba(var(--mistica-vivo-new-raw-white), 0.05);
     --mistica-color-navigationBarDivider: var(--mistica-vivo-new-darkModeBlack);
@@ -444,11 +448,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-vivo-new-vivoPurpleLight80);
         --mistica-color-controlError: var(--mistica-vivo-new-pepper);
         --mistica-color-barTrack: var(--mistica-vivo-new-darkModeGrey6);
+        --mistica-color-barTrackInverse: var(--mistica-vivo-new-darkModeGrey6);
         --mistica-color-loadingBar: var(--mistica-vivo-new-vivoPurpleLight80);
         --mistica-color-loadingBarBackground: var(--mistica-vivo-new-darkModeGrey6);
         --mistica-color-toggleAndroidInactive: var(--mistica-vivo-new-grey4);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-vivo-new-vivoPurpleLight50);
         --mistica-color-iosControlKnob: var(--mistica-vivo-new-grey2);
+        --mistica-color-controlKnobInverse: var(--mistica-vivo-new-grey2);
         --mistica-color-divider: rgba(var(--mistica-vivo-new-raw-white), 0.05);
         --mistica-color-dividerInverse: rgba(var(--mistica-vivo-new-raw-white), 0.05);
         --mistica-color-navigationBarDivider: var(--mistica-vivo-new-darkModeBlack);
@@ -585,11 +591,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-vivo-new-white);
         --mistica-color-controlError: var(--mistica-vivo-new-pepper);
         --mistica-color-barTrack: var(--mistica-vivo-new-grey3);
+        --mistica-color-barTrackInverse: rgba(var(--mistica-vivo-new-raw-white), 0.5);
         --mistica-color-loadingBar: var(--mistica-vivo-new-vivoPurple);
         --mistica-color-loadingBarBackground: var(--mistica-vivo-new-vivoPurpleLight10);
         --mistica-color-toggleAndroidInactive: var(--mistica-vivo-new-grey2);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-vivo-new-vivoPurpleLight20);
         --mistica-color-iosControlKnob: var(--mistica-vivo-new-white);
+        --mistica-color-controlKnobInverse: var(--mistica-vivo-new-vivoPurple);
         --mistica-color-divider: var(--mistica-vivo-new-grey3);
         --mistica-color-dividerInverse: rgba(var(--mistica-vivo-new-raw-white), 0.2);
         --mistica-color-navigationBarDivider: var(--mistica-vivo-new-vivoPurple);
diff --git a/css/vivo.css b/css/vivo.css
index 68d780a61..db84a0d36 100644
--- a/css/vivo.css
+++ b/css/vivo.css
@@ -106,11 +106,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-vivo-white);
     --mistica-color-controlError: var(--mistica-vivo-pepper);
     --mistica-color-barTrack: var(--mistica-vivo-grey3);
+    --mistica-color-barTrackInverse: rgba(var(--mistica-vivo-raw-white), 0.5);
     --mistica-color-loadingBar: var(--mistica-vivo-pink);
     --mistica-color-loadingBarBackground: var(--mistica-vivo-pepperLight30);
     --mistica-color-toggleAndroidInactive: var(--mistica-vivo-grey2);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-vivo-vivoPurpleLight20);
     --mistica-color-iosControlKnob: var(--mistica-vivo-white);
+    --mistica-color-controlKnobInverse: var(--mistica-vivo-vivoPurple);
     --mistica-color-divider: var(--mistica-vivo-grey2);
     --mistica-color-dividerInverse: rgba(var(--mistica-vivo-raw-white), 0.2);
     --mistica-color-navigationBarDivider: var(--mistica-vivo-vivoPurple);
@@ -300,11 +302,13 @@
     --mistica-color-controlActivatedInverse: var(--mistica-vivo-vivoPurpleLight80);
     --mistica-color-controlError: var(--mistica-vivo-pepper);
     --mistica-color-barTrack: var(--mistica-vivo-darkModeGrey6);
+    --mistica-color-barTrackInverse: var(--mistica-vivo-darkModeGrey6);
     --mistica-color-loadingBar: var(--mistica-vivo-vivoPurpleLight80);
     --mistica-color-loadingBarBackground: var(--mistica-vivo-darkModeGrey6);
     --mistica-color-toggleAndroidInactive: var(--mistica-vivo-grey4);
     --mistica-color-toggleAndroidBackgroundActive: var(--mistica-vivo-vivoPurpleLight50);
     --mistica-color-iosControlKnob: var(--mistica-vivo-grey2);
+    --mistica-color-controlKnobInverse: var(--mistica-vivo-grey2);
     --mistica-color-divider: rgba(var(--mistica-vivo-raw-white), 0.05);
     --mistica-color-dividerInverse: rgba(var(--mistica-vivo-raw-white), 0.05);
     --mistica-color-navigationBarDivider: var(--mistica-vivo-darkModeBlack);
@@ -439,11 +443,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-vivo-vivoPurpleLight80);
         --mistica-color-controlError: var(--mistica-vivo-pepper);
         --mistica-color-barTrack: var(--mistica-vivo-darkModeGrey6);
+        --mistica-color-barTrackInverse: var(--mistica-vivo-darkModeGrey6);
         --mistica-color-loadingBar: var(--mistica-vivo-vivoPurpleLight80);
         --mistica-color-loadingBarBackground: var(--mistica-vivo-darkModeGrey6);
         --mistica-color-toggleAndroidInactive: var(--mistica-vivo-grey4);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-vivo-vivoPurpleLight50);
         --mistica-color-iosControlKnob: var(--mistica-vivo-grey2);
+        --mistica-color-controlKnobInverse: var(--mistica-vivo-grey2);
         --mistica-color-divider: rgba(var(--mistica-vivo-raw-white), 0.05);
         --mistica-color-dividerInverse: rgba(var(--mistica-vivo-raw-white), 0.05);
         --mistica-color-navigationBarDivider: var(--mistica-vivo-darkModeBlack);
@@ -577,11 +583,13 @@
         --mistica-color-controlActivatedInverse: var(--mistica-vivo-white);
         --mistica-color-controlError: var(--mistica-vivo-pepper);
         --mistica-color-barTrack: var(--mistica-vivo-grey3);
+        --mistica-color-barTrackInverse: rgba(var(--mistica-vivo-raw-white), 0.5);
         --mistica-color-loadingBar: var(--mistica-vivo-pink);
         --mistica-color-loadingBarBackground: var(--mistica-vivo-pepperLight30);
         --mistica-color-toggleAndroidInactive: var(--mistica-vivo-grey2);
         --mistica-color-toggleAndroidBackgroundActive: var(--mistica-vivo-vivoPurpleLight20);
         --mistica-color-iosControlKnob: var(--mistica-vivo-white);
+        --mistica-color-controlKnobInverse: var(--mistica-vivo-vivoPurple);
         --mistica-color-divider: var(--mistica-vivo-grey2);
         --mistica-color-dividerInverse: rgba(var(--mistica-vivo-raw-white), 0.2);
         --mistica-color-navigationBarDivider: var(--mistica-vivo-vivoPurple);
diff --git a/src/__screenshot_tests__/__image_snapshots__/checkbox-screenshot-test-tsx-checkbox-inverse-mobile-android-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/checkbox-screenshot-test-tsx-checkbox-inverse-mobile-android-1-snap.png
new file mode 100644
index 000000000..ab1704e85
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/checkbox-screenshot-test-tsx-checkbox-inverse-mobile-android-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/checkbox-screenshot-test-tsx-checkbox-inverse-mobile-android-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/checkbox-screenshot-test-tsx-checkbox-inverse-mobile-android-2-snap.png
new file mode 100644
index 000000000..8fd3d0f1b
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/checkbox-screenshot-test-tsx-checkbox-inverse-mobile-android-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/checkbox-screenshot-test-tsx-checkbox-inverse-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/checkbox-screenshot-test-tsx-checkbox-inverse-mobile-ios-1-snap.png
new file mode 100644
index 000000000..8a1a1d8fb
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/checkbox-screenshot-test-tsx-checkbox-inverse-mobile-ios-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/checkbox-screenshot-test-tsx-checkbox-inverse-mobile-ios-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/checkbox-screenshot-test-tsx-checkbox-inverse-mobile-ios-2-snap.png
new file mode 100644
index 000000000..32d12925d
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/checkbox-screenshot-test-tsx-checkbox-inverse-mobile-ios-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-inverse-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-inverse-2-snap.png
index a599ff502..88775d966 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-inverse-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-inverse-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-inverse-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-inverse-3-snap.png
index a9e9bb581..0f83c2e42 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-inverse-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-blau-inverse-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-2-snap.png
index 445cc5cd2..b7122e642 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-3-snap.png
index 6828b2542..f57528c0a 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-movistar-inverse-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-inverse-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-inverse-2-snap.png
index 07152141e..2494a594b 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-inverse-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-inverse-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-inverse-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-inverse-3-snap.png
index 1887f7d15..80be1de25 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-inverse-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-inverse-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-2-snap.png
index 47e13eb5d..cf63ba861 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-3-snap.png
index 3cc29ae57..3d96d2e61 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-o-2-new-inverse-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-3-snap.png
index 4b1577c7c..fc100da15 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-alternative-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-alternative-3-snap.png
index f7e6c5874..bede1f660 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-alternative-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-alternative-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-inverse-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-inverse-2-snap.png
index a50217248..6ed059316 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-inverse-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-inverse-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-inverse-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-inverse-3-snap.png
index 6fdfcea7f..0a4d326dc 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-inverse-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-telefonica-inverse-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-inverse-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-inverse-2-snap.png
index 6bb8d39fb..967cd8ed1 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-inverse-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-inverse-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-inverse-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-inverse-3-snap.png
index 1e9bde5f4..c4a0b1a1f 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-inverse-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-tu-inverse-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-2-snap.png
index b12b5dc99..2aa1dc9e0 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-3-snap.png b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-3-snap.png
index 07e70a07e..5adcb18c8 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-3-snap.png and b/src/__screenshot_tests__/__image_snapshots__/private-skin-components-screenshot-test-tsx-components-in-vivo-new-inverse-3-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/progress-bar-screenshot-test-tsx-progress-bar-inverse-and-color-default-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/progress-bar-screenshot-test-tsx-progress-bar-inverse-and-color-default-1-snap.png
new file mode 100644
index 000000000..88863d406
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/progress-bar-screenshot-test-tsx-progress-bar-inverse-and-color-default-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/progress-bar-screenshot-test-tsx-progress-bar-inverse-and-color-error-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/progress-bar-screenshot-test-tsx-progress-bar-inverse-and-color-error-1-snap.png
new file mode 100644
index 000000000..fefb55cf9
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/progress-bar-screenshot-test-tsx-progress-bar-inverse-and-color-error-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/progress-bar-screenshot-test-tsx-progress-bar-stepped-inverse-and-color-default-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/progress-bar-screenshot-test-tsx-progress-bar-stepped-inverse-and-color-default-1-snap.png
new file mode 100644
index 000000000..6e62190c5
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/progress-bar-screenshot-test-tsx-progress-bar-stepped-inverse-and-color-default-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/progress-bar-screenshot-test-tsx-progress-bar-stepped-inverse-and-color-error-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/progress-bar-screenshot-test-tsx-progress-bar-stepped-inverse-and-color-error-1-snap.png
new file mode 100644
index 000000000..e79a53ab0
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/progress-bar-screenshot-test-tsx-progress-bar-stepped-inverse-and-color-error-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/radio-button-screenshot-test-tsx-radio-button-inverse-mobile-android-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/radio-button-screenshot-test-tsx-radio-button-inverse-mobile-android-1-snap.png
new file mode 100644
index 000000000..120359406
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/radio-button-screenshot-test-tsx-radio-button-inverse-mobile-android-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/radio-button-screenshot-test-tsx-radio-button-inverse-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/radio-button-screenshot-test-tsx-radio-button-inverse-mobile-ios-1-snap.png
new file mode 100644
index 000000000..b8fb981c6
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/radio-button-screenshot-test-tsx-radio-button-inverse-mobile-ios-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/slider-screenshot-test-tsx-slider-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/slider-screenshot-test-tsx-slider-desktop-1-snap.png
index 50615e129..c389c8d6a 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/slider-screenshot-test-tsx-slider-desktop-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/slider-screenshot-test-tsx-slider-desktop-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/slider-screenshot-test-tsx-slider-disabled-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/slider-screenshot-test-tsx-slider-disabled-1-snap.png
index 5de310639..1deb6c5b1 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/slider-screenshot-test-tsx-slider-disabled-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/slider-screenshot-test-tsx-slider-disabled-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/slider-screenshot-test-tsx-slider-inverse-in-desktop-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/slider-screenshot-test-tsx-slider-inverse-in-desktop-1-snap.png
new file mode 100644
index 000000000..46e13e641
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/slider-screenshot-test-tsx-slider-inverse-in-desktop-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/slider-screenshot-test-tsx-slider-inverse-in-mobile-android-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/slider-screenshot-test-tsx-slider-inverse-in-mobile-android-1-snap.png
new file mode 100644
index 000000000..e59d6332e
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/slider-screenshot-test-tsx-slider-inverse-in-mobile-android-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/slider-screenshot-test-tsx-slider-inverse-in-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/slider-screenshot-test-tsx-slider-inverse-in-mobile-ios-1-snap.png
new file mode 100644
index 000000000..eac629ed6
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/slider-screenshot-test-tsx-slider-inverse-in-mobile-ios-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/slider-screenshot-test-tsx-slider-inverse-with-half-of-the-bar-covered-s-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/slider-screenshot-test-tsx-slider-inverse-with-half-of-the-bar-covered-s-1-snap.png
new file mode 100644
index 000000000..e59d6332e
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/slider-screenshot-test-tsx-slider-inverse-with-half-of-the-bar-covered-s-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/slider-screenshot-test-tsx-slider-mobile-android-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/slider-screenshot-test-tsx-slider-mobile-android-1-snap.png
index c84425e18..353e58034 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/slider-screenshot-test-tsx-slider-mobile-android-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/slider-screenshot-test-tsx-slider-mobile-android-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/slider-screenshot-test-tsx-slider-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/slider-screenshot-test-tsx-slider-mobile-ios-1-snap.png
index 64a418ce4..f936945c3 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/slider-screenshot-test-tsx-slider-mobile-ios-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/slider-screenshot-test-tsx-slider-mobile-ios-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/slider-screenshot-test-tsx-slider-tooltip-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/slider-screenshot-test-tsx-slider-tooltip-1-snap.png
index 4b6dac6f3..8091d626f 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/slider-screenshot-test-tsx-slider-tooltip-1-snap.png and b/src/__screenshot_tests__/__image_snapshots__/slider-screenshot-test-tsx-slider-tooltip-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/slider-screenshot-test-tsx-slider-tooltip-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/slider-screenshot-test-tsx-slider-tooltip-2-snap.png
index 9cbdc0e84..9efebad89 100644
Binary files a/src/__screenshot_tests__/__image_snapshots__/slider-screenshot-test-tsx-slider-tooltip-2-snap.png and b/src/__screenshot_tests__/__image_snapshots__/slider-screenshot-test-tsx-slider-tooltip-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/switch-screenshot-test-tsx-switch-inverse-mobile-android-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/switch-screenshot-test-tsx-switch-inverse-mobile-android-1-snap.png
new file mode 100644
index 000000000..b79744029
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/switch-screenshot-test-tsx-switch-inverse-mobile-android-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/switch-screenshot-test-tsx-switch-inverse-mobile-android-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/switch-screenshot-test-tsx-switch-inverse-mobile-android-2-snap.png
new file mode 100644
index 000000000..ee201794c
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/switch-screenshot-test-tsx-switch-inverse-mobile-android-2-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/switch-screenshot-test-tsx-switch-inverse-mobile-ios-1-snap.png b/src/__screenshot_tests__/__image_snapshots__/switch-screenshot-test-tsx-switch-inverse-mobile-ios-1-snap.png
new file mode 100644
index 000000000..2223816e6
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/switch-screenshot-test-tsx-switch-inverse-mobile-ios-1-snap.png differ
diff --git a/src/__screenshot_tests__/__image_snapshots__/switch-screenshot-test-tsx-switch-inverse-mobile-ios-2-snap.png b/src/__screenshot_tests__/__image_snapshots__/switch-screenshot-test-tsx-switch-inverse-mobile-ios-2-snap.png
new file mode 100644
index 000000000..df0e028ff
Binary files /dev/null and b/src/__screenshot_tests__/__image_snapshots__/switch-screenshot-test-tsx-switch-inverse-mobile-ios-2-snap.png differ
diff --git a/src/__screenshot_tests__/checkbox-screenshot-test.tsx b/src/__screenshot_tests__/checkbox-screenshot-test.tsx
index 8b1ad4ed7..a690dffce 100644
--- a/src/__screenshot_tests__/checkbox-screenshot-test.tsx
+++ b/src/__screenshot_tests__/checkbox-screenshot-test.tsx
@@ -20,6 +20,25 @@ test.each(DEVICES)('Checkbox (%s)', async (device) => {
     expect(imageChecked).toMatchImageSnapshot();
 });
 
+test.each(DEVICES)('Checkbox - inverse (%s)', async (device) => {
+    await openStoryPage({
+        id: 'components-checkbox--controlled',
+        device,
+        args: {inverse: true},
+    });
+
+    const wrapper = await screen.findByTestId('checkbox-wrapper');
+    const checkbox = await screen.findByRole('checkbox');
+
+    const image = await wrapper.screenshot();
+    expect(image).toMatchImageSnapshot();
+
+    await checkbox.click();
+
+    const imageChecked = await wrapper.screenshot();
+    expect(imageChecked).toMatchImageSnapshot();
+});
+
 test('Checkbox - uncontrolled', async () => {
     await openStoryPage({
         id: 'components-checkbox--uncontrolled',
diff --git a/src/__screenshot_tests__/progress-bar-screenshot-test.tsx b/src/__screenshot_tests__/progress-bar-screenshot-test.tsx
index c9ee68c64..0aaff1bfc 100644
--- a/src/__screenshot_tests__/progress-bar-screenshot-test.tsx
+++ b/src/__screenshot_tests__/progress-bar-screenshot-test.tsx
@@ -12,6 +12,16 @@ test.each(COLORS)('ProgressBar - color={%s}', async (color) => {
     expect(image).toMatchImageSnapshot();
 });
 
+test.each(COLORS)('ProgressBar - inverse and color={%s}', async (color) => {
+    await openStoryPage({id: 'components-progress-bars--progress-bar-story', args: {color, inverse: true}});
+
+    const stepper = await screen.findByTestId('progress-bar');
+
+    const image = await stepper.screenshot();
+
+    expect(image).toMatchImageSnapshot();
+});
+
 test.each(COLORS)('ProgressBarStepped - color={%s}', async (color) => {
     await openStoryPage({id: 'components-progress-bars--progress-bar-stepped-story', args: {color}});
 
@@ -21,3 +31,16 @@ test.each(COLORS)('ProgressBarStepped - color={%s}', async (color) => {
 
     expect(image).toMatchImageSnapshot();
 });
+
+test.each(COLORS)('ProgressBarStepped - inverse and color={%s}', async (color) => {
+    await openStoryPage({
+        id: 'components-progress-bars--progress-bar-stepped-story',
+        args: {color, inverse: true},
+    });
+
+    const stepper = await screen.findByTestId('progress-bar-stepped');
+
+    const image = await stepper.screenshot();
+
+    expect(image).toMatchImageSnapshot();
+});
diff --git a/src/__screenshot_tests__/radio-button-screenshot-test.tsx b/src/__screenshot_tests__/radio-button-screenshot-test.tsx
index a847fe851..7883dbc2f 100644
--- a/src/__screenshot_tests__/radio-button-screenshot-test.tsx
+++ b/src/__screenshot_tests__/radio-button-screenshot-test.tsx
@@ -13,6 +13,18 @@ test.each(DEVICES)('RadioButton (%s)', async (device) => {
     expect(image).toMatchImageSnapshot();
 });
 
+test.each(DEVICES)('RadioButton - inverse (%s)', async (device) => {
+    await openStoryPage({
+        id: 'components-radio-button--controlled',
+        device,
+        args: {inverse: true},
+    });
+
+    const wrapper = await screen.findByTestId('radio-group-wrapper');
+    const image = await wrapper.screenshot();
+    expect(image).toMatchImageSnapshot();
+});
+
 test('RadioButton - uncontrolled', async () => {
     await openStoryPage({
         id: 'components-radio-button--uncontrolled',
diff --git a/src/__screenshot_tests__/slider-screenshot-test.tsx b/src/__screenshot_tests__/slider-screenshot-test.tsx
index 35ae59e45..dfaaf3bab 100644
--- a/src/__screenshot_tests__/slider-screenshot-test.tsx
+++ b/src/__screenshot_tests__/slider-screenshot-test.tsx
@@ -14,6 +14,19 @@ test.each(DEVICES)('Slider - %s', async (device) => {
     expect(image).toMatchImageSnapshot();
 });
 
+test.each(DEVICES)('Slider - inverse in %s', async (device) => {
+    await openStoryPage({
+        id: 'components-slider--uncontrolled',
+        device,
+        args: {inverse: true},
+    });
+
+    const slider = await screen.findByTestId('slider');
+
+    const image = await slider.screenshot();
+    expect(image).toMatchImageSnapshot();
+});
+
 test('Slider - disabled', async () => {
     await openStoryPage({
         id: 'components-slider--uncontrolled',
diff --git a/src/__screenshot_tests__/switch-screenshot-test.tsx b/src/__screenshot_tests__/switch-screenshot-test.tsx
index 679bbb83a..d8a41a415 100644
--- a/src/__screenshot_tests__/switch-screenshot-test.tsx
+++ b/src/__screenshot_tests__/switch-screenshot-test.tsx
@@ -20,6 +20,25 @@ test.each(DEVICES)('Switch (%s)', async (device) => {
     expect(imageChecked).toMatchImageSnapshot();
 });
 
+test.each(DEVICES)('Switch - inverse (%s)', async (device) => {
+    await openStoryPage({
+        id: 'components-switch--controlled',
+        device,
+        args: {inverse: true},
+    });
+
+    const wrapper = await screen.findByTestId('switch-wrapper');
+    const element = await screen.findByRole('switch');
+
+    const image = await wrapper.screenshot();
+    expect(image).toMatchImageSnapshot();
+
+    await element.click();
+
+    const imageChecked = await wrapper.screenshot();
+    expect(imageChecked).toMatchImageSnapshot();
+});
+
 test('Switch - uncontrolled', async () => {
     await openStoryPage({
         id: 'components-switch--uncontrolled',
diff --git a/src/__stories__/checkbox-story.tsx b/src/__stories__/checkbox-story.tsx
index 2328ff0ff..6577ea8d3 100644
--- a/src/__stories__/checkbox-story.tsx
+++ b/src/__stories__/checkbox-story.tsx
@@ -1,68 +1,89 @@
 import * as React from 'react';
-import {Checkbox, Text3, Inline, IconCheckRegular, IconCloseRegular} from '..';
+import {Checkbox, Text3, Inline, IconCheckRegular, IconCloseRegular, ResponsiveLayout, Box} from '..';
 
 export default {
     title: 'Components/Checkbox',
+    parameters: {fullScreen: true},
 };
 
 type Args = {
     disabled: boolean;
+    inverse: boolean;
 };
 
-export const Controlled: StoryComponent<Args> = ({disabled}) => {
+export const Controlled: StoryComponent<Args> = ({disabled, inverse}) => {
     const [checked, onChange] = React.useState(false);
     return (
-        <div data-testid="checkbox-wrapper" style={{maxWidth: 'fit-content'}}>
-            <Checkbox name="checkbox" checked={checked} onChange={onChange} disabled={disabled}>
-                checkbox content
-            </Checkbox>
-        </div>
+        <ResponsiveLayout variant={inverse ? 'inverse' : undefined} fullWidth>
+            <Box padding={16}>
+                <div data-testid="checkbox-wrapper" style={{maxWidth: 'fit-content'}}>
+                    <Checkbox name="checkbox" checked={checked} onChange={onChange} disabled={disabled}>
+                        checkbox content
+                    </Checkbox>
+                </div>
+            </Box>
+        </ResponsiveLayout>
     );
 };
 
 Controlled.storyName = 'controlled';
 Controlled.args = {
     disabled: false,
+    inverse: false,
 };
 
-export const Uncontrolled: StoryComponent<Args> = ({disabled}) => {
+export const Uncontrolled: StoryComponent<Args> = ({disabled, inverse}) => {
     return (
-        <div data-testid="checkbox-wrapper" style={{maxWidth: 'fit-content'}}>
-            <Checkbox name="checkbox" defaultChecked={false} disabled={disabled}>
-                checkbox content
-            </Checkbox>
-        </div>
+        <ResponsiveLayout variant={inverse ? 'inverse' : undefined} fullWidth>
+            <Box padding={16}>
+                <div data-testid="checkbox-wrapper" style={{maxWidth: 'fit-content'}}>
+                    <Checkbox name="checkbox" defaultChecked={false} disabled={disabled}>
+                        checkbox content
+                    </Checkbox>
+                </div>
+            </Box>
+        </ResponsiveLayout>
     );
 };
 
 Uncontrolled.storyName = 'uncontrolled';
 Uncontrolled.args = {
     disabled: false,
+    inverse: false,
 };
 
-export const CustomRender: StoryComponent<Args> = ({disabled}) => {
+export const CustomRender: StoryComponent<Args> = ({disabled, inverse}) => {
     return (
-        <div data-testid="checkbox-wrapper" style={{maxWidth: 'fit-content'}}>
-            <Checkbox
-                name="checkbox"
-                disabled={disabled}
-                render={({labelId, checked, disabled}) => (
-                    <div style={{opacity: disabled ? 0.5 : undefined}}>
-                        <Inline alignItems="center" space={16}>
-                            {checked ? <IconCheckRegular size={18} /> : <IconCloseRegular size={18} />}
-                            {/* set the text id to match the checkbox name, so this text can be linked as label for accessibility */}
-                            <Text3 regular id={labelId}>
-                                checkbox content
-                            </Text3>
-                        </Inline>
-                    </div>
-                )}
-            />
-        </div>
+        <ResponsiveLayout variant={inverse ? 'inverse' : undefined} fullWidth>
+            <Box padding={16}>
+                <div data-testid="checkbox-wrapper" style={{maxWidth: 'fit-content'}}>
+                    <Checkbox
+                        name="checkbox"
+                        disabled={disabled}
+                        render={({labelId, checked, disabled}) => (
+                            <div style={{opacity: disabled ? 0.5 : undefined}}>
+                                <Inline alignItems="center" space={16}>
+                                    {checked ? (
+                                        <IconCheckRegular size={18} />
+                                    ) : (
+                                        <IconCloseRegular size={18} />
+                                    )}
+                                    {/* set the text id to match the checkbox name, so this text can be linked as label for accessibility */}
+                                    <Text3 regular id={labelId}>
+                                        checkbox content
+                                    </Text3>
+                                </Inline>
+                            </div>
+                        )}
+                    />
+                </div>
+            </Box>
+        </ResponsiveLayout>
     );
 };
 
 CustomRender.storyName = 'custom render';
 CustomRender.args = {
     disabled: false,
+    inverse: false,
 };
diff --git a/src/__stories__/progress-bar-story.tsx b/src/__stories__/progress-bar-story.tsx
index 225b4e8ed..96f695f15 100644
--- a/src/__stories__/progress-bar-story.tsx
+++ b/src/__stories__/progress-bar-story.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {ProgressBar, ProgressBarStepped} from '..';
+import {Box, ProgressBar, ProgressBarStepped, ResponsiveLayout} from '..';
 import {vars} from '../skins/skin-contract.css';
 
 export default {
@@ -10,21 +10,32 @@ export default {
             control: {type: 'select'},
         },
     },
+    parameters: {fullScreen: true},
 };
 
 type ProgressBarStoryArgs = {
     reverse: boolean;
     progressPercent: number;
     color: 'default' | 'error';
+    inverse: boolean;
 };
 
-export const ProgressBarStory: StoryComponent<ProgressBarStoryArgs> = ({reverse, progressPercent, color}) => (
-    <ProgressBar
-        dataAttributes={{testid: 'progress-bar'}}
-        progressPercent={progressPercent}
-        reverse={reverse}
-        color={color === 'error' ? vars.colors.error : undefined}
-    />
+export const ProgressBarStory: StoryComponent<ProgressBarStoryArgs> = ({
+    reverse,
+    progressPercent,
+    color,
+    inverse,
+}) => (
+    <ResponsiveLayout variant={inverse ? 'inverse' : undefined} fullWidth>
+        <Box padding={16}>
+            <ProgressBar
+                dataAttributes={{testid: 'progress-bar'}}
+                progressPercent={progressPercent}
+                reverse={reverse}
+                color={color === 'error' ? vars.colors.error : undefined}
+            />
+        </Box>
+    </ResponsiveLayout>
 );
 
 ProgressBarStory.storyName = 'ProgressBar';
@@ -32,25 +43,32 @@ ProgressBarStory.args = {
     reverse: false,
     progressPercent: 30,
     color: 'default',
+    inverse: false,
 };
 
 type ProgressBarSteppedStoryArgs = {
     steps: number;
     currentStep: number;
     color: 'default' | 'error';
+    inverse: boolean;
 };
 
 export const ProgressBarSteppedStory: StoryComponent<ProgressBarSteppedStoryArgs> = ({
     steps,
     currentStep,
     color,
+    inverse,
 }) => (
-    <ProgressBarStepped
-        steps={steps}
-        currentStep={currentStep}
-        dataAttributes={{testid: 'progress-bar-stepped'}}
-        color={color === 'error' ? vars.colors.error : undefined}
-    />
+    <ResponsiveLayout variant={inverse ? 'inverse' : undefined} fullWidth>
+        <Box padding={16}>
+            <ProgressBarStepped
+                steps={steps}
+                currentStep={currentStep}
+                dataAttributes={{testid: 'progress-bar-stepped'}}
+                color={color === 'error' ? vars.colors.error : undefined}
+            />
+        </Box>
+    </ResponsiveLayout>
 );
 
 ProgressBarSteppedStory.storyName = 'ProgressBarStepped';
@@ -58,6 +76,7 @@ ProgressBarSteppedStory.args = {
     steps: 4,
     currentStep: 3,
     color: 'default',
+    inverse: false,
 };
 ProgressBarSteppedStory.argTypes = {
     steps: {
diff --git a/src/__stories__/radio-button-story.tsx b/src/__stories__/radio-button-story.tsx
index 80a71102d..bbce3dd2e 100644
--- a/src/__stories__/radio-button-story.tsx
+++ b/src/__stories__/radio-button-story.tsx
@@ -1,106 +1,139 @@
 import * as React from 'react';
-import {Stack, RadioGroup, RadioButton, Inline, Text3, IconHandRightRegular} from '..';
+import {Stack, RadioGroup, RadioButton, Inline, Text3, IconHandRightRegular, ResponsiveLayout, Box} from '..';
 
 export default {
     title: 'Components/Radio Button',
+    parameters: {fullScreen: true},
 };
 
 type Args = {
     disabled: boolean;
+    inverse: boolean;
 };
 
-export const Controlled: StoryComponent<Args> = ({disabled}) => {
+export const Controlled: StoryComponent<Args> = ({disabled, inverse}) => {
     const [value, setValue] = React.useState('first');
     return (
-        <div data-testid="radio-group-wrapper" style={{maxWidth: 'fit-content'}}>
-            <RadioGroup name="radio-group" disabled={disabled} onChange={setValue} value={value}>
-                <Stack space={16}>
-                    <RadioButton value="first">
-                        <Text3 regular>First option</Text3>
-                    </RadioButton>
-                    <RadioButton value="second">
-                        <Text3 regular>Second option</Text3>
-                    </RadioButton>
-                </Stack>
-            </RadioGroup>
-        </div>
+        <ResponsiveLayout variant={inverse ? 'inverse' : undefined} fullWidth>
+            <Box padding={16}>
+                <div data-testid="radio-group-wrapper" style={{maxWidth: 'fit-content'}}>
+                    <RadioGroup name="radio-group" disabled={disabled} onChange={setValue} value={value}>
+                        <Stack space={16}>
+                            <RadioButton value="first">
+                                <Text3 regular>First option</Text3>
+                            </RadioButton>
+                            <RadioButton value="second">
+                                <Text3 regular>Second option</Text3>
+                            </RadioButton>
+                        </Stack>
+                    </RadioGroup>
+                </div>
+            </Box>
+        </ResponsiveLayout>
     );
 };
 
 Controlled.storyName = 'controlled';
 Controlled.args = {
     disabled: false,
+    inverse: false,
 };
 
-export const Uncontrolled: StoryComponent<Args> = ({disabled}) => {
+export const Uncontrolled: StoryComponent<Args> = ({disabled, inverse}) => {
     const [value, setValue] = React.useState('first');
     return (
-        <div data-testid="radio-group-wrapper" style={{maxWidth: 'fit-content'}}>
-            <RadioGroup name="radio-group" disabled={disabled} onChange={setValue} defaultValue={value}>
-                <Stack space={16}>
-                    <RadioButton value="first">
-                        <Text3 regular>First option</Text3>
-                    </RadioButton>
-                    <RadioButton value="second">
-                        <Text3 regular>Second option</Text3>
-                    </RadioButton>
-                </Stack>
-            </RadioGroup>
-        </div>
+        <ResponsiveLayout variant={inverse ? 'inverse' : undefined} fullWidth>
+            <Box padding={16}>
+                <div data-testid="radio-group-wrapper" style={{maxWidth: 'fit-content'}}>
+                    <RadioGroup
+                        name="radio-group"
+                        disabled={disabled}
+                        onChange={setValue}
+                        defaultValue={value}
+                    >
+                        <Stack space={16}>
+                            <RadioButton value="first">
+                                <Text3 regular>First option</Text3>
+                            </RadioButton>
+                            <RadioButton value="second">
+                                <Text3 regular>Second option</Text3>
+                            </RadioButton>
+                        </Stack>
+                    </RadioGroup>
+                </div>
+            </Box>
+        </ResponsiveLayout>
     );
 };
 
 Uncontrolled.storyName = 'uncontrolled';
 Uncontrolled.args = {
     disabled: false,
+    inverse: false,
 };
 
-export const CustomRender: StoryComponent<Args> = ({disabled}) => {
+export const CustomRender: StoryComponent<Args> = ({disabled, inverse}) => {
     const [value, setValue] = React.useState('first');
     return (
-        <div data-testid="radio-group-wrapper" style={{maxWidth: 'fit-content'}}>
-            <RadioGroup name="radio-group" disabled={disabled} onChange={setValue} defaultValue={value}>
-                <Stack space={16}>
-                    <RadioButton
-                        value="first"
-                        render={({labelId, disabled}) => (
-                            <div style={{opacity: disabled ? 0.5 : undefined}}>
-                                <Inline space={16}>
-                                    <div style={{visibility: value === 'first' ? 'visible' : 'hidden'}}>
-                                        <IconHandRightRegular size={20} />
-                                    </div>
+        <ResponsiveLayout variant={inverse ? 'inverse' : undefined} fullWidth>
+            <Box padding={16}>
+                <div data-testid="radio-group-wrapper" style={{maxWidth: 'fit-content'}}>
+                    <RadioGroup
+                        name="radio-group"
+                        disabled={disabled}
+                        onChange={setValue}
+                        defaultValue={value}
+                    >
+                        <Stack space={16}>
+                            <RadioButton
+                                value="first"
+                                render={({labelId, disabled}) => (
+                                    <div style={{opacity: disabled ? 0.5 : undefined}}>
+                                        <Inline space={16}>
+                                            <div
+                                                style={{visibility: value === 'first' ? 'visible' : 'hidden'}}
+                                            >
+                                                <IconHandRightRegular size={20} />
+                                            </div>
 
-                                    {/* set the text id to match the radio button name, so this text can be linked as label for accessibility */}
-                                    <Text3 regular id={labelId}>
-                                        First option
-                                    </Text3>
-                                </Inline>
-                            </div>
-                        )}
-                    />
-                    <RadioButton
-                        value="second"
-                        render={({labelId, disabled}) => (
-                            <div style={{opacity: disabled ? 0.5 : undefined}}>
-                                <Inline alignItems="center" space={16}>
-                                    <div style={{visibility: value === 'second' ? 'visible' : 'hidden'}}>
-                                        <IconHandRightRegular size={20} />
+                                            {/* set the text id to match the radio button name, so this text can be linked as label for accessibility */}
+                                            <Text3 regular id={labelId}>
+                                                First option
+                                            </Text3>
+                                        </Inline>
+                                    </div>
+                                )}
+                            />
+                            <RadioButton
+                                value="second"
+                                render={({labelId, disabled}) => (
+                                    <div style={{opacity: disabled ? 0.5 : undefined}}>
+                                        <Inline alignItems="center" space={16}>
+                                            <div
+                                                style={{
+                                                    visibility: value === 'second' ? 'visible' : 'hidden',
+                                                }}
+                                            >
+                                                <IconHandRightRegular size={20} />
+                                            </div>
+                                            {/* set the text id to match the radio button name, so this text can be linked as label for accessibility */}
+                                            <Text3 regular id={labelId}>
+                                                Second option
+                                            </Text3>
+                                        </Inline>
                                     </div>
-                                    {/* set the text id to match the radio button name, so this text can be linked as label for accessibility */}
-                                    <Text3 regular id={labelId}>
-                                        Second option
-                                    </Text3>
-                                </Inline>
-                            </div>
-                        )}
-                    />
-                </Stack>
-            </RadioGroup>
-        </div>
+                                )}
+                            />
+                        </Stack>
+                    </RadioGroup>
+                </div>
+            </Box>
+        </ResponsiveLayout>
     );
 };
 
 CustomRender.storyName = 'custom render';
 CustomRender.args = {
     disabled: false,
+    inverse: false,
 };
diff --git a/src/__stories__/slider-story.tsx b/src/__stories__/slider-story.tsx
index 8c0a6fba0..0f7118ece 100644
--- a/src/__stories__/slider-story.tsx
+++ b/src/__stories__/slider-story.tsx
@@ -3,6 +3,7 @@ import {Box, ResponsiveLayout, Slider} from '..';
 
 export default {
     title: 'Components/Slider',
+    parameters: {fullScreen: true},
 };
 
 type Args = {
@@ -11,13 +12,14 @@ type Args = {
     max: number;
     min: number;
     tooltip: boolean;
+    inverse: boolean;
 };
 
-export const Controlled: StoryComponent<Args> = ({disabled, step, max, min, tooltip}) => {
+export const Controlled: StoryComponent<Args> = ({disabled, step, max, min, tooltip, inverse}) => {
     const [value, setValue] = React.useState(min);
     return (
-        <ResponsiveLayout>
-            <Box paddingY={48}>
+        <ResponsiveLayout variant={inverse ? 'inverse' : undefined}>
+            <Box paddingX={16} paddingY={64}>
                 <Slider
                     name="slider"
                     aria-label="slider"
@@ -42,12 +44,13 @@ Controlled.args = {
     max: 100,
     min: 0,
     tooltip: false,
+    inverse: false,
 };
 
-export const Uncontrolled: StoryComponent<Args> = ({disabled, step, max, min, tooltip}) => {
+export const Uncontrolled: StoryComponent<Args> = ({disabled, step, max, min, tooltip, inverse}) => {
     return (
-        <ResponsiveLayout>
-            <Box padding={48}>
+        <ResponsiveLayout variant={inverse ? 'inverse' : undefined}>
+            <Box paddingX={16} paddingY={64}>
                 <Slider
                     name="slider"
                     aria-label="slider"
@@ -71,4 +74,5 @@ Uncontrolled.args = {
     max: 100,
     min: 0,
     tooltip: false,
+    inverse: false,
 };
diff --git a/src/__stories__/switch-story.tsx b/src/__stories__/switch-story.tsx
index 96727ed98..309c5b929 100644
--- a/src/__stories__/switch-story.tsx
+++ b/src/__stories__/switch-story.tsx
@@ -1,69 +1,90 @@
 import * as React from 'react';
-import {Switch, Inline, Text3, IconCheckRegular, IconCloseRegular} from '..';
+import {Switch, Inline, Text3, IconCheckRegular, IconCloseRegular, ResponsiveLayout, Box} from '..';
 
 export default {
     title: 'Components/Switch',
+    parameters: {fullScreen: true},
 };
 
 type Args = {
     disabled: boolean;
+    inverse: boolean;
 };
 
-export const Controlled: StoryComponent<Args> = ({disabled}) => {
+export const Controlled: StoryComponent<Args> = ({disabled, inverse}) => {
     const [checked, onChange] = React.useState(false);
 
     return (
-        <div data-testid="switch-wrapper" style={{maxWidth: 'fit-content'}}>
-            <Switch name="switch" checked={checked} onChange={onChange} disabled={disabled}>
-                switch content
-            </Switch>
-        </div>
+        <ResponsiveLayout variant={inverse ? 'inverse' : undefined} fullWidth>
+            <Box padding={16}>
+                <div data-testid="switch-wrapper" style={{maxWidth: 'fit-content'}}>
+                    <Switch name="switch" checked={checked} onChange={onChange} disabled={disabled}>
+                        switch content
+                    </Switch>
+                </div>
+            </Box>
+        </ResponsiveLayout>
     );
 };
 
 Controlled.storyName = 'controlled';
 Controlled.args = {
     disabled: false,
+    inverse: false,
 };
 
-export const Uncontrolled: StoryComponent<Args> = ({disabled}) => {
+export const Uncontrolled: StoryComponent<Args> = ({disabled, inverse}) => {
     return (
-        <div data-testid="switch-wrapper" style={{maxWidth: 'fit-content'}}>
-            <Switch name="switch" defaultChecked={false} disabled={disabled}>
-                switch content
-            </Switch>
-        </div>
+        <ResponsiveLayout variant={inverse ? 'inverse' : undefined} fullWidth>
+            <Box padding={16}>
+                <div data-testid="switch-wrapper" style={{maxWidth: 'fit-content'}}>
+                    <Switch name="switch" defaultChecked={false} disabled={disabled}>
+                        switch content
+                    </Switch>
+                </div>
+            </Box>
+        </ResponsiveLayout>
     );
 };
 
 Uncontrolled.storyName = 'uncontrolled';
 Uncontrolled.args = {
     disabled: false,
+    inverse: false,
 };
 
-export const CustomRender: StoryComponent<Args> = ({disabled}) => {
+export const CustomRender: StoryComponent<Args> = ({disabled, inverse}) => {
     return (
-        <div data-testid="switch-wrapper" style={{maxWidth: 'fit-content'}}>
-            <Switch
-                name="switch"
-                disabled={disabled}
-                render={({labelId, checked, disabled}) => (
-                    <div style={{opacity: disabled ? 0.5 : undefined}}>
-                        <Inline alignItems="center" space={16}>
-                            {checked ? <IconCheckRegular size={18} /> : <IconCloseRegular size={18} />}
-                            {/* set the text id to match the checkbox name, so this text can be linked as label for accessibility */}
-                            <Text3 regular id={labelId}>
-                                switch content
-                            </Text3>
-                        </Inline>
-                    </div>
-                )}
-            />
-        </div>
+        <ResponsiveLayout variant={inverse ? 'inverse' : undefined} fullWidth>
+            <Box padding={16}>
+                <div data-testid="switch-wrapper" style={{maxWidth: 'fit-content'}}>
+                    <Switch
+                        name="switch"
+                        disabled={disabled}
+                        render={({labelId, checked, disabled}) => (
+                            <div style={{opacity: disabled ? 0.5 : undefined}}>
+                                <Inline alignItems="center" space={16}>
+                                    {checked ? (
+                                        <IconCheckRegular size={18} />
+                                    ) : (
+                                        <IconCloseRegular size={18} />
+                                    )}
+                                    {/* set the text id to match the checkbox name, so this text can be linked as label for accessibility */}
+                                    <Text3 regular id={labelId}>
+                                        switch content
+                                    </Text3>
+                                </Inline>
+                            </div>
+                        )}
+                    />
+                </div>
+            </Box>
+        </ResponsiveLayout>
     );
 };
 
 CustomRender.storyName = 'custom render';
 CustomRender.args = {
     disabled: false,
+    inverse: false,
 };
diff --git a/src/checkbox.css.ts b/src/checkbox.css.ts
index 740fdefea..bc415b4b1 100644
--- a/src/checkbox.css.ts
+++ b/src/checkbox.css.ts
@@ -32,7 +32,6 @@ const boxBase = style([
         alignItems: 'center',
         flexShrink: 0,
         borderRadius: vars.borderRadii.checkbox,
-        background: vars.colors.background,
     }),
     {
         height: 18,
@@ -45,9 +44,24 @@ const boxBase = style([
 ]);
 
 export const boxVariant = styleVariants({
-    ios: [boxBase, {boxShadow: `inset 0 0 0 1px ${vars.colors.control}`}],
-    rest: [boxBase, {boxShadow: `inset 0 0 0 2px ${vars.colors.control}`}],
-    checked: [boxBase, {boxShadow: `inset 0 0 0 12px ${vars.colors.controlActivated}`}],
+    ios: [boxBase, {background: vars.colors.background, boxShadow: `inset 0 0 0 1px ${vars.colors.control}`}],
+    rest: [
+        boxBase,
+        {background: vars.colors.background, boxShadow: `inset 0 0 0 2px ${vars.colors.control}`},
+    ],
+    checked: [
+        boxBase,
+        {background: vars.colors.background, boxShadow: `inset 0 0 0 12px ${vars.colors.controlActivated}`},
+    ],
+});
+
+export const inverseBoxVariant = styleVariants({
+    ios: [boxBase, {background: 'transparent', boxShadow: `inset 0 0 0 1px ${vars.colors.controlInverse}`}],
+    rest: [boxBase, {background: 'transparent', boxShadow: `inset 0 0 0 2px ${vars.colors.controlInverse}`}],
+    checked: [
+        boxBase,
+        {background: 'transparent', boxShadow: `inset 0 0 0 12px ${vars.colors.controlActivatedInverse}`},
+    ],
 });
 
 export const check = style([
diff --git a/src/checkbox.tsx b/src/checkbox.tsx
index c4871fa67..6ad6dbaeb 100644
--- a/src/checkbox.tsx
+++ b/src/checkbox.tsx
@@ -10,11 +10,14 @@ import {getPrefixedDataAttributes} from './utils/dom';
 import * as styles from './checkbox.css';
 import {vars} from './skins/skin-contract.css';
 import {combineRefs} from './utils/common';
+import {useIsInverseVariant} from './theme-variant-context';
 
 import type {DataAttributes} from './utils/types';
 
 const IconCheckbox = ({isChecked, disabled}: {isChecked: boolean; disabled?: boolean}) => {
     const {isIos} = useTheme();
+    const isInverse = useIsInverseVariant();
+    const variant = isChecked ? 'checked' : isIos ? 'ios' : 'rest';
 
     const icon = isIos ? (
         <svg
@@ -25,7 +28,7 @@ const IconCheckbox = ({isChecked, disabled}: {isChecked: boolean; disabled?: boo
         >
             <path
                 d="M2.659 7.724c.33.366.92.368 1.254.005L9.79 1.336A.782.782 0 009.719.202a.858.858 0 00-1.178.069l-5.236 5.72-1.841-2.038a.857.857 0 00-1.177-.078.782.782 0 00-.082 1.133l2.454 2.716z"
-                fill={vars.colors.inverse}
+                fill={isInverse ? vars.colors.controlKnobInverse : vars.colors.inverse}
             />
         </svg>
     ) : (
@@ -35,15 +38,21 @@ const IconCheckbox = ({isChecked, disabled}: {isChecked: boolean; disabled?: boo
             height="10"
             className={classnames(styles.check, {[styles.checkChecked]: isChecked})}
         >
-            <path d="M5 10L0 5.192l1.4-1.346L5 7.308 12.6 0 14 1.346z" fill={vars.colors.inverse} />
+            <path
+                d="M5 10L0 5.192l1.4-1.346L5 7.308 12.6 0 14 1.346z"
+                fill={isInverse ? vars.colors.controlKnobInverse : vars.colors.inverse}
+            />
         </svg>
     );
 
     return (
         <div
-            className={classnames(styles.boxVariant[isChecked ? 'checked' : isIos ? 'ios' : 'rest'], {
-                [styles.disabled]: disabled,
-            })}
+            className={classnames(
+                isInverse ? styles.inverseBoxVariant[variant] : styles.boxVariant[variant],
+                {
+                    [styles.disabled]: disabled,
+                }
+            )}
         >
             {icon}
         </div>
diff --git a/src/progress-bar.css.ts b/src/progress-bar.css.ts
index 8d0761790..027cb1312 100644
--- a/src/progress-bar.css.ts
+++ b/src/progress-bar.css.ts
@@ -1,13 +1,17 @@
 import {sprinkles} from './sprinkles.css';
 import {vars} from './skins/skin-contract.css';
-import {style, keyframes} from '@vanilla-extract/css';
+import {style, keyframes, styleVariants} from '@vanilla-extract/css';
 
 const transition = '1s cubic-bezier(0.75, 0, 0.27, 1)';
 
-export const barBackground = sprinkles({
+const barBackgroundBase = sprinkles({
     borderRadius: vars.borderRadii.bar,
     height: 4,
-    background: vars.colors.barTrack,
+});
+
+export const barBackground = styleVariants({
+    default: [barBackgroundBase, {background: vars.colors.barTrack}],
+    inverse: [barBackgroundBase, {background: vars.colors.barTrackInverse}],
 });
 
 export const bar = sprinkles({
@@ -50,6 +54,5 @@ export const inverse = style({
 });
 
 export const progressBarSteppedContainer = style({
-    display: 'inline-block',
     width: '100%',
 });
diff --git a/src/progress-bar.tsx b/src/progress-bar.tsx
index c6cd1ebd3..42d4acce5 100644
--- a/src/progress-bar.tsx
+++ b/src/progress-bar.tsx
@@ -7,6 +7,7 @@ import {getPrefixedDataAttributes} from './utils/dom';
 import classNames from 'classnames';
 import Inline from './inline';
 import * as tokens from './text-tokens';
+import {useIsInverseVariant} from './theme-variant-context';
 
 import type {DataAttributes} from './utils/types';
 
@@ -31,6 +32,7 @@ export const ProgressBar = ({
     reverse = false,
 }: ProgressBarProps): JSX.Element => {
     const {texts, t} = useTheme();
+    const isInverse = useIsInverseVariant();
     const progressValue = Math.max(0, Math.min(100, progressPercent));
 
     const getFormattedLabel = () => {
@@ -55,14 +57,16 @@ export const ProgressBar = ({
     return (
         <div
             {...getPrefixedDataAttributes(dataAttributes, 'ProgressBar')}
-            className={styles.barBackground}
+            className={styles.barBackground[isInverse ? 'inverse' : 'default']}
             {...a11yProps}
         >
             <div
                 className={classNames(styles.bar, reverse ? styles.inverse : styles.normal)}
                 style={{
                     maxWidth: `${progressValue}%`,
-                    backgroundColor: color ?? vars.colors.controlActivated,
+                    backgroundColor:
+                        color ??
+                        (isInverse ? vars.colors.controlActivatedInverse : vars.colors.controlActivated),
                 }}
             />
         </div>
@@ -89,6 +93,7 @@ export const ProgressBarStepped = ({
     'aria-hidden': ariaHidden,
 }: ProgressBarSteppedProps): JSX.Element => {
     const {texts, t} = useTheme();
+    const isInverse = useIsInverseVariant();
 
     const [step, setStep] = React.useState(Math.ceil(currentStep));
     const [isBack, setIsBack] = React.useState(false);
@@ -134,7 +139,11 @@ export const ProgressBarStepped = ({
                     const hasAnimation = index === step - 1;
 
                     return (
-                        <div key={index} className={styles.barBackground} aria-hidden="true">
+                        <div
+                            key={index}
+                            className={styles.barBackground[isInverse ? 'inverse' : 'default']}
+                            aria-hidden="true"
+                        >
                             {(isCompleted || isCurrent) && (
                                 <div
                                     className={classNames(styles.bar, {
@@ -142,7 +151,11 @@ export const ProgressBarStepped = ({
                                         [styles.inverse]: isCurrent && isBack,
                                     })}
                                     style={{
-                                        backgroundColor: color ?? vars.colors.controlActivated,
+                                        backgroundColor:
+                                            color ??
+                                            (isInverse
+                                                ? vars.colors.controlActivatedInverse
+                                                : vars.colors.controlActivated),
                                         maxWidth: isCompleted || (hasAnimation && !isBack) ? '100%' : '0',
                                     }}
                                 />
diff --git a/src/radio-button.css.ts b/src/radio-button.css.ts
index b7b4e25b2..fcbaa2375 100644
--- a/src/radio-button.css.ts
+++ b/src/radio-button.css.ts
@@ -10,7 +10,6 @@ const outerCircleBase = style([
         cursor: 'pointer',
         flexShrink: 0,
         borderRadius: '50%',
-        background: vars.colors.background,
     }),
     {
         width: 20,
@@ -21,11 +20,58 @@ const outerCircleBase = style([
 ]);
 
 export const outerCircleVariants = styleVariants({
-    default: [outerCircleBase, {boxShadow: `inset 0 0 0 2px ${vars.colors.control}`}],
-    ios: [outerCircleBase, {boxShadow: `inset 0 0 0 1px ${vars.colors.control}`}],
+    default: [
+        outerCircleBase,
+        {background: vars.colors.background, boxShadow: `inset 0 0 0 2px ${vars.colors.control}`},
+    ],
+    ios: [
+        outerCircleBase,
+        {background: vars.colors.background, boxShadow: `inset 0 0 0 1px ${vars.colors.control}`},
+    ],
+    checked: [
+        outerCircleBase,
+        {
+            boxShadow: `inset 0 0 0 2px ${vars.colors.controlActivated}`,
+            // using a gradient here to not fill until the circle edge, otherwise the radiobutton border looks strange
+            background: vars.colors.background,
+        },
+    ],
+    checkedIos: [
+        outerCircleBase,
+        {
+            boxShadow: `inset 0 0 0 5px ${vars.colors.controlActivated}`,
+            background: `radial-gradient(circle, ${vars.colors.iosControlKnob} 0%, ${vars.colors.iosControlKnob} 64%, transparent 64%, transparent 100%)`,
+        },
+    ],
 });
 
-export const innerCircle = style([
+export const inverseOuterCircleVariants = styleVariants({
+    default: [
+        outerCircleBase,
+        {background: 'transparent', boxShadow: `inset 0 0 0 2px ${vars.colors.controlInverse}`},
+    ],
+    ios: [
+        outerCircleBase,
+        {background: 'transparent', boxShadow: `inset 0 0 0 1px ${vars.colors.controlInverse}`},
+    ],
+    checked: [
+        outerCircleBase,
+        {
+            boxShadow: `inset 0 0 0 2px ${vars.colors.controlActivatedInverse}`,
+            // using a gradient here to not fill until the circle edge, otherwise the radiobutton border looks strange
+            background: 'transparent',
+        },
+    ],
+    checkedIos: [
+        outerCircleBase,
+        {
+            boxShadow: `inset 0 0 0 5px ${vars.colors.controlActivatedInverse}`,
+            background: `radial-gradient(circle, ${vars.colors.controlKnobInverse} 0%, ${vars.colors.controlKnobInverse} 64%, transparent 64%, transparent 100%)`,
+        },
+    ],
+});
+
+const innerCircleBase = style([
     sprinkles({
         display: 'flex',
         borderRadius: '50%',
@@ -39,15 +85,33 @@ export const innerCircle = style([
     },
 ]);
 
-export const innerCircleChecked = style([
-    sprinkles({
-        background: vars.colors.controlActivated,
-    }),
-    {
-        opacity: 1,
-        transform: 'none',
-    },
-]);
+export const innerCircleVariant = styleVariants({
+    default: [innerCircleBase],
+    checked: [
+        innerCircleBase,
+        sprinkles({
+            background: vars.colors.controlActivated,
+        }),
+        {
+            opacity: 1,
+            transform: 'none',
+        },
+    ],
+});
+
+export const inverseInnerCircleVariant = styleVariants({
+    default: [innerCircleBase],
+    checked: [
+        innerCircleBase,
+        sprinkles({
+            background: vars.colors.controlActivatedInverse,
+        }),
+        {
+            opacity: 1,
+            transform: 'none',
+        },
+    ],
+});
 
 const radioButtonBase = style({
     WebkitTapHighlightColor: 'transparent',
@@ -67,16 +131,4 @@ export const radioButtonContainerDisabled = style([
     },
 ]);
 
-export const outerCircleCheckedVariants = styleVariants({
-    default: {
-        boxShadow: `inset 0 0 0 2px ${vars.colors.controlActivated}`,
-        // using a gradient here to not fill until the circle edge, otherwise the radiobutton border looks strange
-        background: vars.colors.background,
-    },
-    ios: {
-        boxShadow: `inset 0 0 0 5px ${vars.colors.controlActivated}`,
-        background: `radial-gradient(circle, ${vars.colors.iosControlKnob} 0%, ${vars.colors.iosControlKnob} 64%, transparent 64%, transparent 100%)`,
-    },
-});
-
 export const disabled = style({cursor: 'default', opacity: 0.5});
diff --git a/src/radio-button.tsx b/src/radio-button.tsx
index d992c9723..764ce6a0e 100644
--- a/src/radio-button.tsx
+++ b/src/radio-button.tsx
@@ -9,6 +9,7 @@ import classnames from 'classnames';
 import {useTheme} from './hooks';
 import {getPrefixedDataAttributes} from './utils/dom';
 import * as styles from './radio-button.css';
+import {useIsInverseVariant} from './theme-variant-context';
 
 import type {DataAttributes} from './utils/types';
 
@@ -70,6 +71,7 @@ const RadioButton = ({
     const checked = value === selectedValue;
     const tabIndex = focusableValue === value ? 0 : -1;
     const {isIos} = useTheme();
+    const isInverse = useIsInverseVariant();
 
     const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
         switch (event.key) {
@@ -95,18 +97,28 @@ const RadioButton = ({
         }
     };
 
+    const outerCircleVariant = isIos ? (checked ? 'checkedIos' : 'ios') : checked ? 'checked' : 'default';
+    const innerCircleVariant = checked ? 'checked' : 'default';
+
     const radio = (
         <div
             className={classnames(
-                isIos ? styles.outerCircleVariants.ios : styles.outerCircleVariants.default,
+                isInverse
+                    ? styles.inverseOuterCircleVariants[outerCircleVariant]
+                    : styles.outerCircleVariants[outerCircleVariant],
                 {
-                    [styles.outerCircleCheckedVariants[isIos ? 'ios' : 'default']]: checked,
                     [styles.disabled]: disabled,
                 }
             )}
         >
             {!isIos && (
-                <div className={classnames(styles.innerCircle, {[styles.innerCircleChecked]: checked})} />
+                <div
+                    className={
+                        isInverse
+                            ? styles.inverseInnerCircleVariant[innerCircleVariant]
+                            : styles.innerCircleVariant[innerCircleVariant]
+                    }
+                />
             )}
         </div>
     );
diff --git a/src/skins/blau.tsx b/src/skins/blau.tsx
index 4bd9c3207..159568f2f 100644
--- a/src/skins/blau.tsx
+++ b/src/skins/blau.tsx
@@ -114,11 +114,13 @@ export const getBlauSkin: GetKnownSkin = () => {
             controlActivatedInverse: palette.white,
             controlError: palette.blauRed,
             barTrack: palette.grey2,
+            barTrackInverse: applyAlpha(palette.grey6, 0.2),
             loadingBar: palette.blauBlueSecondary,
             loadingBarBackground: palette.blauBlueSecondary10,
             toggleAndroidInactive: palette.grey2,
             toggleAndroidBackgroundActive: palette.blauBlueSecondary10,
             iosControlKnob: palette.white,
+            controlKnobInverse: palette.blauBlueSecondary,
             divider: palette.grey2,
             dividerInverse: applyAlpha(palette.white, 0.2),
             navigationBarDivider: palette.blauBluePrimary,
@@ -246,11 +248,13 @@ export const getBlauSkin: GetKnownSkin = () => {
             controlActivatedInverse: palette.blauBlueSecondary,
             controlError: palette.blauRed,
             barTrack: palette.darkModeGrey6,
+            barTrackInverse: palette.darkModeGrey6,
             loadingBar: palette.blauBluePrimary,
             loadingBarBackground: palette.darkModeGrey,
             toggleAndroidInactive: palette.grey5,
             toggleAndroidBackgroundActive: palette.blauBlueSecondary30,
             iosControlKnob: palette.grey2,
+            controlKnobInverse: palette.grey2,
             divider: applyAlpha(palette.white, 0.05),
             dividerInverse: applyAlpha(palette.white, 0.05),
             navigationBarDivider: palette.darkModeBlack,
diff --git a/src/skins/movistar.tsx b/src/skins/movistar.tsx
index 881fcaa6e..5571cd443 100644
--- a/src/skins/movistar.tsx
+++ b/src/skins/movistar.tsx
@@ -132,11 +132,13 @@ export const getMovistarSkin: GetKnownSkin = () => {
             controlActivatedInverse: palette.white,
             controlError: palette.pepper55,
             barTrack: palette.grey3,
+            barTrackInverse: applyAlpha(palette.black, 0.14),
             loadingBar: palette.movistarBlue,
             loadingBarBackground: palette.grey2,
             toggleAndroidInactive: palette.grey2,
             toggleAndroidBackgroundActive: palette.movistarBlue20,
             iosControlKnob: palette.white,
+            controlKnobInverse: palette.movistarBlue,
             divider: palette.grey3,
             dividerInverse: applyAlpha(palette.white, 0.2),
             navigationBarDivider: palette.movistarBlue,
@@ -264,11 +266,13 @@ export const getMovistarSkin: GetKnownSkin = () => {
             controlActivatedInverse: palette.movistarBlue,
             controlError: palette.pepper45,
             barTrack: palette.darkModeGrey6,
+            barTrackInverse: palette.darkModeGrey6,
             loadingBar: palette.movistarBlue,
             loadingBarBackground: palette.darkModeGrey6,
             toggleAndroidInactive: palette.darkModeGrey2,
             toggleAndroidBackgroundActive: palette.movistarBlue20,
             iosControlKnob: palette.darkModeGrey2,
+            controlKnobInverse: palette.darkModeGrey2,
             divider: applyAlpha(palette.white, 0.1),
             dividerInverse: applyAlpha(palette.white, 0.1),
             navigationBarDivider: palette.darkModeBlack,
diff --git a/src/skins/o2-new.tsx b/src/skins/o2-new.tsx
index ad55752ad..5a923a50f 100644
--- a/src/skins/o2-new.tsx
+++ b/src/skins/o2-new.tsx
@@ -122,11 +122,13 @@ export const getO2NewSkin: GetKnownSkin = () => {
             controlActivatedInverse: palette.white,
             controlError: palette.o2Red60,
             barTrack: palette.grey30,
+            barTrackInverse: applyAlpha(palette.white, 0.3),
             loadingBar: palette.beyondBlue,
             loadingBarBackground: palette.grey20,
             toggleAndroidInactive: palette.grey30,
             toggleAndroidBackgroundActive: palette.beyondBlue15,
             iosControlKnob: palette.white,
+            controlKnobInverse: palette.beyondBlue,
             divider: palette.grey30,
             dividerInverse: applyAlpha(palette.white, 0.2),
             navigationBarDivider: palette.darkBlue,
@@ -254,11 +256,13 @@ export const getO2NewSkin: GetKnownSkin = () => {
             controlActivatedInverse: palette.darkModeBeyondBlue,
             controlError: palette.o2Red45,
             barTrack: palette.darkModeGrey6,
+            barTrackInverse: palette.darkModeGrey6,
             loadingBar: palette.darkModeBeyondBlue,
             loadingBarBackground: palette.darkModeGrey6,
             toggleAndroidInactive: palette.grey20,
             toggleAndroidBackgroundActive: palette.beyondBlue15,
             iosControlKnob: palette.grey30,
+            controlKnobInverse: palette.grey30,
             badge: palette.o2Red65,
             feedbackErrorBackground: palette.o2Red60,
             feedbackInfoBackground: palette.darkModeGrey6,
diff --git a/src/skins/o2.tsx b/src/skins/o2.tsx
index 187ded8af..a57ee2f4c 100644
--- a/src/skins/o2.tsx
+++ b/src/skins/o2.tsx
@@ -119,11 +119,13 @@ export const getO2Skin: GetKnownSkin = () => {
             controlActivatedInverse: palette.white,
             controlError: palette.pepper,
             barTrack: palette.grey3,
+            barTrackInverse: applyAlpha(palette.white, 0.3),
             loadingBar: palette.o2BluePrimary,
             loadingBarBackground: palette.grey1,
             toggleAndroidInactive: palette.grey2,
             toggleAndroidBackgroundActive: palette.o2BluePrimary15,
             iosControlKnob: palette.white,
+            controlKnobInverse: palette.o2BluePrimary,
             divider: palette.grey2,
             dividerInverse: applyAlpha(palette.white, 0.2),
             navigationBarDivider: palette.o2BluePrimary,
@@ -251,11 +253,13 @@ export const getO2Skin: GetKnownSkin = () => {
             controlActivatedInverse: palette.o2BluePrimary30,
             controlError: palette.pepper,
             barTrack: palette.darkModeGrey6,
+            barTrackInverse: palette.darkModeGrey6,
             loadingBar: palette.darkModeO2BluePrimary,
             loadingBarBackground: palette.darkModeGrey6,
             toggleAndroidInactive: palette.grey4,
             toggleAndroidBackgroundActive: palette.o2BlueLight30,
             iosControlKnob: palette.grey2,
+            controlKnobInverse: palette.grey2,
             badge: palette.pepper60,
             feedbackErrorBackground: palette.pepper,
             feedbackInfoBackground: palette.darkModeGrey6,
diff --git a/src/skins/skin-contract.css.ts b/src/skins/skin-contract.css.ts
index ae95a2cf1..649f80926 100644
--- a/src/skins/skin-contract.css.ts
+++ b/src/skins/skin-contract.css.ts
@@ -62,12 +62,14 @@ const colors: Colors = {
     controlActivatedInverse: '',
     controlError: '',
     barTrack: '',
+    barTrackInverse: '',
     loadingBar: '',
     loadingBarBackground: '',
     textActivated: '',
 
     toggleAndroidInactive: '',
     toggleAndroidBackgroundActive: '',
+    controlKnobInverse: '',
     iosControlKnob: '',
 
     // DIVIDERS
diff --git a/src/skins/telefonica.tsx b/src/skins/telefonica.tsx
index 8af2c16c0..95886f9e7 100644
--- a/src/skins/telefonica.tsx
+++ b/src/skins/telefonica.tsx
@@ -112,12 +112,14 @@ export const getTelefonicaSkin: GetKnownSkin = () => {
             controlInverse: palette.grey1,
             controlActivatedInverse: palette.white,
             controlError: palette.coral,
-            barTrack: palette.grey3,
+            barTrack: palette.grey2,
+            barTrackInverse: applyAlpha(palette.white, 0.3),
             loadingBar: palette.telefonicaBlue30,
             loadingBarBackground: palette.telefonicaBlue70,
             toggleAndroidInactive: palette.grey2,
             toggleAndroidBackgroundActive: palette.grey2,
             iosControlKnob: palette.white,
+            controlKnobInverse: palette.telefonicaBlue,
             divider: palette.grey2,
             dividerInverse: applyAlpha(palette.white, 0.2),
             navigationBarDivider: palette.telefonicaBlue,
@@ -245,11 +247,13 @@ export const getTelefonicaSkin: GetKnownSkin = () => {
             controlActivatedInverse: palette.telefonicaBlue,
             controlError: palette.coral,
             barTrack: palette.darkModeGrey6,
+            barTrackInverse: palette.darkModeGrey6,
             loadingBar: palette.telefonicaBlue,
             loadingBarBackground: palette.grey6,
             toggleAndroidInactive: palette.grey4,
             toggleAndroidBackgroundActive: palette.telefonicaBlue20,
             iosControlKnob: palette.grey2,
+            controlKnobInverse: palette.grey2,
             divider: applyAlpha(palette.white, 0.05),
             dividerInverse: applyAlpha(palette.white, 0.05),
             navigationBarDivider: palette.darkModeBlack,
diff --git a/src/skins/tu.tsx b/src/skins/tu.tsx
index f2caa0944..8e7f6301f 100644
--- a/src/skins/tu.tsx
+++ b/src/skins/tu.tsx
@@ -117,11 +117,13 @@ export const getTuSkin: GetKnownSkin = () => {
             controlActivatedInverse: palette.white,
             controlError: palette.red,
             barTrack: palette.grey2,
+            barTrackInverse: applyAlpha(palette.white, 0.36),
             loadingBar: palette.green40,
             loadingBarBackground: palette.green,
             toggleAndroidInactive: palette.grey2,
             toggleAndroidBackgroundActive: palette.primary15,
             iosControlKnob: palette.white,
+            controlKnobInverse: palette.primary,
             divider: palette.grey2,
             dividerInverse: applyAlpha(palette.white, 0.2),
             navigationBarDivider: palette.primary,
@@ -249,11 +251,13 @@ export const getTuSkin: GetKnownSkin = () => {
             controlActivatedInverse: palette.blue30,
             controlError: palette.red,
             barTrack: palette.darkModeGrey6,
+            barTrackInverse: palette.darkModeGrey6,
             loadingBar: palette.green40,
             loadingBarBackground: palette.green,
             toggleAndroidInactive: palette.grey4,
             toggleAndroidBackgroundActive: palette.blue20,
             iosControlKnob: palette.grey2,
+            controlKnobInverse: palette.grey2,
             divider: applyAlpha(palette.white, 0.05),
             dividerInverse: applyAlpha(palette.white, 0.05),
             navigationBarDivider: palette.darkModeBlack,
diff --git a/src/skins/types/colors.tsx b/src/skins/types/colors.tsx
index 75ec9f37a..e80914c20 100644
--- a/src/skins/types/colors.tsx
+++ b/src/skins/types/colors.tsx
@@ -66,11 +66,13 @@ export type Colors = {
     controlActivatedInverse: string;
     controlError: string;
     barTrack: string;
+    barTrackInverse: string;
     loadingBar: string;
     loadingBarBackground: string;
     toggleAndroidInactive: string;
     toggleAndroidBackgroundActive: string;
     iosControlKnob: string;
+    controlKnobInverse: string;
     divider: string;
     dividerInverse: string;
     navigationBarDivider: string;
diff --git a/src/skins/vivo-new.tsx b/src/skins/vivo-new.tsx
index 1205511f9..cc848354b 100644
--- a/src/skins/vivo-new.tsx
+++ b/src/skins/vivo-new.tsx
@@ -112,11 +112,13 @@ export const getVivoNewSkin: GetKnownSkin = () => {
             controlActivatedInverse: palette.white,
             controlError: palette.pepper,
             barTrack: palette.grey3,
+            barTrackInverse: applyAlpha(palette.white, 0.5),
             loadingBar: palette.vivoPurple,
             loadingBarBackground: palette.vivoPurpleLight10,
             toggleAndroidInactive: palette.grey2,
             toggleAndroidBackgroundActive: palette.vivoPurpleLight20,
             iosControlKnob: palette.white,
+            controlKnobInverse: palette.vivoPurple,
             divider: palette.grey3,
             dividerInverse: applyAlpha(palette.white, 0.2),
             navigationBarDivider: palette.vivoPurple,
@@ -244,11 +246,13 @@ export const getVivoNewSkin: GetKnownSkin = () => {
             controlActivatedInverse: palette.vivoPurpleLight80,
             controlError: palette.pepper,
             barTrack: palette.darkModeGrey6,
+            barTrackInverse: palette.darkModeGrey6,
             loadingBar: palette.vivoPurpleLight80,
             loadingBarBackground: palette.darkModeGrey6,
             toggleAndroidInactive: palette.grey4,
             toggleAndroidBackgroundActive: palette.vivoPurpleLight50,
             iosControlKnob: palette.grey2,
+            controlKnobInverse: palette.grey2,
             divider: applyAlpha(palette.white, 0.05),
             dividerInverse: applyAlpha(palette.white, 0.05),
             navigationBarDivider: palette.darkModeBlack,
diff --git a/src/skins/vivo.tsx b/src/skins/vivo.tsx
index 38fcfe77e..1ed353e21 100644
--- a/src/skins/vivo.tsx
+++ b/src/skins/vivo.tsx
@@ -112,11 +112,13 @@ export const getVivoSkin: GetKnownSkin = () => {
             controlActivatedInverse: palette.white,
             controlError: palette.pepper,
             barTrack: palette.grey3,
+            barTrackInverse: applyAlpha(palette.white, 0.5),
             loadingBar: palette.pink,
             loadingBarBackground: palette.pepperLight30,
             toggleAndroidInactive: palette.grey2,
             toggleAndroidBackgroundActive: palette.vivoPurpleLight20,
             iosControlKnob: palette.white,
+            controlKnobInverse: palette.vivoPurple,
             divider: palette.grey2,
             dividerInverse: applyAlpha(palette.white, 0.2),
             navigationBarDivider: palette.vivoPurple,
@@ -244,11 +246,13 @@ export const getVivoSkin: GetKnownSkin = () => {
             controlActivatedInverse: palette.vivoPurpleLight80,
             controlError: palette.pepper,
             barTrack: palette.darkModeGrey6,
+            barTrackInverse: palette.darkModeGrey6,
             loadingBar: palette.vivoPurpleLight80,
             loadingBarBackground: palette.darkModeGrey6,
             toggleAndroidInactive: palette.grey4,
             toggleAndroidBackgroundActive: palette.vivoPurpleLight50,
             iosControlKnob: palette.grey2,
+            controlKnobInverse: palette.grey2,
             divider: applyAlpha(palette.white, 0.05),
             dividerInverse: applyAlpha(palette.white, 0.05),
             navigationBarDivider: palette.darkModeBlack,
diff --git a/src/slider.css.ts b/src/slider.css.ts
index 00e058534..1ec2fdaec 100644
--- a/src/slider.css.ts
+++ b/src/slider.css.ts
@@ -1,4 +1,4 @@
-import {style} from '@vanilla-extract/css';
+import {style, styleVariants} from '@vanilla-extract/css';
 import {vars} from './skins/skin-contract.css';
 import * as mq from './media-queries.css';
 import {applyAlpha} from './utils/color';
@@ -46,18 +46,22 @@ export const thumbContainer = style([
     },
 ]);
 
-export const defaultThumb = style([
+const defaultThumbBase = style([
     sprinkles({
         width: DEFAULT_THUMB_SIZE,
         height: DEFAULT_THUMB_SIZE,
         borderRadius: '50%',
-        background: vars.colors.controlActivated,
     }),
     {
         transition: '0.3s cubic-bezier(0.215, 0.61, 0.355, 1)',
     },
 ]);
 
+export const defaultThumb = styleVariants({
+    default: [defaultThumbBase, sprinkles({background: vars.colors.controlActivated})],
+    inverse: [defaultThumbBase, sprinkles({background: vars.colors.controlActivatedInverse})],
+});
+
 export const iosThumb = style([
     sprinkles({
         background: vars.colors.iosControlKnob,
@@ -72,16 +76,38 @@ export const iosThumb = style([
     },
 ]);
 
-export const thumbHover = style({
-    '@media': {
-        [mq.supportsHover]: {
-            boxShadow: `0 0 0 5px ${applyAlpha(vars.rawColors.controlActivated, 0.2)}`,
+export const thumbHover = styleVariants({
+    default: [
+        {
+            '@media': {
+                [mq.supportsHover]: {
+                    boxShadow: `0 0 0 5px ${applyAlpha(vars.rawColors.controlActivated, 0.2)}`,
+                },
+            },
         },
-    },
+    ],
+    inverse: [
+        {
+            '@media': {
+                [mq.supportsHover]: {
+                    boxShadow: `0 0 0 5px ${applyAlpha(vars.rawColors.controlActivatedInverse, 0.2)}`,
+                },
+            },
+        },
+    ],
 });
 
-export const thumbActive = style({
-    boxShadow: `0 0 0 8px ${applyAlpha(vars.rawColors.controlActivated, 0.2)}`,
+export const thumbActive = styleVariants({
+    default: [
+        {
+            boxShadow: `0 0 0 8px ${applyAlpha(vars.rawColors.controlActivated, 0.2)}`,
+        },
+    ],
+    inverse: [
+        {
+            boxShadow: `0 0 0 8px ${applyAlpha(vars.rawColors.controlActivatedInverse, 0.2)}`,
+        },
+    ],
 });
 
 export const input = style([
diff --git a/src/slider.tsx b/src/slider.tsx
index 533beab06..98d5734ea 100644
--- a/src/slider.tsx
+++ b/src/slider.tsx
@@ -10,6 +10,7 @@ import Tooltip from './tooltip';
 import Box from './box';
 import {useControlProps} from './form-context';
 import {combineRefs} from './utils/common';
+import {useIsInverseVariant} from './theme-variant-context';
 
 import type {ExclusifyUnion} from './utils/utility-types';
 import type {DataAttributes} from './utils/types';
@@ -178,6 +179,8 @@ const Slider = React.forwardRef<HTMLInputElement, SliderProps>(
         const [isThumbHovered, setIsThumbHovered] = React.useState(false);
         const [isFocused, setIsFocused] = React.useState(false);
         const {isIos} = useTheme();
+        const isInverse = useIsInverseVariant();
+        const thumbVariant = isInverse ? 'inverse' : 'default';
 
         const isPointerOverElement = (element: HTMLElement | null, x: number, y: number) => {
             const box = element?.getBoundingClientRect();
@@ -235,9 +238,9 @@ const Slider = React.forwardRef<HTMLInputElement, SliderProps>(
 
         const thumb = (
             <div
-                className={classNames(isIos ? styles.iosThumb : styles.defaultThumb, {
-                    [styles.thumbHover]: !isIos && isThumbHovered && !isPointerDown,
-                    [styles.thumbActive]: !isIos && isPointerDown,
+                className={classNames(isIos ? styles.iosThumb : styles.defaultThumb[thumbVariant], {
+                    [styles.thumbHover[thumbVariant]]: !isIos && isThumbHovered && !isPointerDown,
+                    [styles.thumbActive[thumbVariant]]: !isIos && isPointerDown,
                 })}
             />
         );
@@ -295,7 +298,7 @@ const Slider = React.forwardRef<HTMLInputElement, SliderProps>(
                         className={styles.track}
                         ref={trackRef}
                         style={{
-                            background: `linear-gradient(to right, ${vars.colors.controlActivated} ${trackProgressPosition}, ${vars.colors.barTrack} ${trackProgressPosition}`,
+                            background: `linear-gradient(to right, ${isInverse ? vars.colors.controlActivatedInverse : vars.colors.controlActivated} ${trackProgressPosition}, ${isInverse ? vars.colors.barTrackInverse : vars.colors.barTrack} ${trackProgressPosition}`,
                         }}
                     />
                     <div
diff --git a/src/switch-component.css.ts b/src/switch-component.css.ts
index d5ca95a68..81a0867b6 100644
--- a/src/switch-component.css.ts
+++ b/src/switch-component.css.ts
@@ -69,6 +69,15 @@ export const barVariants = styleVariants({
     checkedIos: [barBase, {background: colorsVars.colors.controlActivated, height: 31}],
 });
 
+export const inverseBarVariants = styleVariants({
+    default: [barBase, {background: colorsVars.colors.controlInverse, height: 14}],
+    // Hardcoded color because the native switch in iOS doesn't allow modification of this color
+    ios: [barBase, {background: '#E9E9EA', height: 31}],
+    iosDark: [barBase, {background: '#39393D', height: 31}],
+    checked: [barBase, {background: colorsVars.colors.toggleAndroidBackgroundActive, height: 14}],
+    checkedIos: [barBase, {background: colorsVars.colors.controlActivatedInverse, height: 31}],
+});
+
 const containerBase = style({
     WebkitTapHighlightColor: 'transparent',
 });
@@ -138,3 +147,16 @@ export const ballVariants = styleVariants({
     checked: [ballVariantsBase.default, {right: 1, backgroundColor: colorsVars.colors.controlActivated}],
     checkedIos: [ballVariantsBase.ios, {right: 6, backgroundColor: colorsVars.colors.iosControlKnob}],
 });
+
+export const inverseBallVariants = styleVariants({
+    default: [
+        ballVariantsBase.default,
+        {right: 21, backgroundColor: colorsVars.colors.toggleAndroidInactive},
+    ],
+    ios: [ballVariantsBase.ios, {right: 26, backgroundColor: colorsVars.colors.iosControlKnob}],
+    checked: [
+        ballVariantsBase.default,
+        {right: 1, backgroundColor: colorsVars.colors.controlActivatedInverse},
+    ],
+    checkedIos: [ballVariantsBase.ios, {right: 6, backgroundColor: colorsVars.colors.controlKnobInverse}],
+});
diff --git a/src/switch-component.tsx b/src/switch-component.tsx
index 309a64e23..8740499b5 100644
--- a/src/switch-component.tsx
+++ b/src/switch-component.tsx
@@ -14,6 +14,7 @@ import Inline from './inline';
 import {useTheme} from './hooks';
 import {getPrefixedDataAttributes} from './utils/dom';
 import * as styles from './switch-component.css';
+import {useIsInverseVariant} from './theme-variant-context';
 
 import type {DataAttributes} from './utils/types';
 
@@ -52,6 +53,7 @@ type PropsChildren = {
 
 const Switch = (props: PropsRender | PropsChildren): JSX.Element => {
     const {isIos, isDarkMode} = useTheme();
+    const isInverse = useIsInverseVariant();
     const reactId = React.useId();
     const labelId = props['aria-labelledby'] || reactId;
     const {defaultValue, value, onChange, focusableRef, disabled} = useControlProps({
@@ -93,6 +95,18 @@ const Switch = (props: PropsRender | PropsChildren): JSX.Element => {
         }
     };
 
+    const barVariant = isIos
+        ? isChecked
+            ? 'checkedIos'
+            : isDarkMode
+              ? 'iosDark'
+              : 'ios'
+        : isChecked
+          ? 'checked'
+          : 'default';
+
+    const ballVariant = isIos ? (isChecked ? 'checkedIos' : 'ios') : isChecked ? 'checked' : 'default';
+
     const switchEl = (
         <div
             className={
@@ -105,24 +119,14 @@ const Switch = (props: PropsRender | PropsChildren): JSX.Element => {
                 <div className={styles.switchCheckboxLabel}>
                     <span
                         className={
-                            styles.barVariants[
-                                isIos
-                                    ? isChecked
-                                        ? 'checkedIos'
-                                        : isDarkMode
-                                          ? 'iosDark'
-                                          : 'ios'
-                                    : isChecked
-                                      ? 'checked'
-                                      : 'default'
-                            ]
+                            isInverse ? styles.inverseBarVariants[barVariant] : styles.barVariants[barVariant]
                         }
                     />
                     <span
                         className={
-                            styles.ballVariants[
-                                isIos ? (isChecked ? 'checkedIos' : 'ios') : isChecked ? 'checked' : 'default'
-                            ]
+                            isInverse
+                                ? styles.inverseBallVariants[ballVariant]
+                                : styles.ballVariants[ballVariant]
                         }
                     />
                 </div>