diff --git a/packages/web-components/src/components/ic-toggle-button/ic-toggle-button.css b/packages/web-components/src/components/ic-toggle-button/ic-toggle-button.css
index 8aeb3d9ac3..c345665d52 100644
--- a/packages/web-components/src/components/ic-toggle-button/ic-toggle-button.css
+++ b/packages/web-components/src/components/ic-toggle-button/ic-toggle-button.css
@@ -154,7 +154,8 @@
 }
 
 :host(.ic-toggle-button-checked) ::part(button):focus {
-  box-shadow: inset 0 0 0 var(--ic-space-xxxs) var(--ic-architectural-white),
+  box-shadow: inset 0 0 0 var(--ic-space-xxxs)
+      var(--ic-toggle-button-selected-border-focus),
     var(--ic-border-focus);
 }
 
diff --git a/packages/web-components/src/global/color-mode.css b/packages/web-components/src/global/color-mode.css
index 917374a011..61a6bfed48 100644
--- a/packages/web-components/src/global/color-mode.css
+++ b/packages/web-components/src/global/color-mode.css
@@ -1237,6 +1237,9 @@ ic-theme,
   );
   --ic-toggle-button-selected-text-disabled: var(--ic-color-brand-text);
   --ic-toggle-button-selected-icon-disabled: var(--ic-color-icon-brand);
+  --ic-toggle-button-selected-border-focus: var(
+    --ic-color-border-neutral-white
+  );
   --ic-toggle-button-unselected-border-monochrome: var(
     --ic-color-border-neutral-black
   );
@@ -2630,6 +2633,9 @@ ic-theme,
       --ic-color-text-tertiary-light
     );
     --ic-toggle-button-selected-icon-disabled: var(--ic-color-icon-disabled);
+    --ic-toggle-button-selected-border-focus: var(
+      --ic-color-border-neutral-black
+    );
     --ic-toggle-button-unselected-border-monochrome: var(
       --ic-color-border-neutral-white
     );
@@ -3956,6 +3962,9 @@ ic-theme,
     --ic-color-text-tertiary-light
   );
   --ic-toggle-button-selected-icon-disabled: var(--ic-color-icon-disabled);
+  --ic-toggle-button-selected-border-focus: var(
+    --ic-color-border-neutral-black
+  );
   --ic-toggle-button-unselected-border-monochrome: var(
     --ic-color-border-neutral-white
   );