1 files changed, 22 insertions, 17 deletions

diff --git a/toolkit/content/widgets/moz-toggle/moz-toggle.css b/toolkit/content/widgets/moz-toggle/moz-toggle.css
index 8b67a81878..2005544181 100644
--- a/toolkit/content/widgets/moz-toggle/moz-toggle.css
+++ b/toolkit/content/widgets/moz-toggle/moz-toggle.css
@@ -38,11 +38,15 @@
   --toggle-background-color-pressed-hover: var(--color-accent-primary-hover);
   --toggle-background-color-pressed-active: var(--color-accent-primary-active);
   --toggle-border-color: var(--border-interactive-color);
+  --toggle-border-color-hover: var(--toggle-border-color);
+  --toggle-border-color-active: var(--toggle-border-color);
   --toggle-border-radius: var(--border-radius-circle);
   --toggle-border-width: var(--border-width);
   --toggle-height: var(--size-item-small);
   --toggle-width: var(--size-item-large);
   --toggle-dot-background-color: var(--toggle-border-color);
+  --toggle-dot-background-color-hover: var(--toggle-dot-background-color);
+  --toggle-dot-background-color-active: var(--toggle-dot-background-color);
   --toggle-dot-background-color-on-pressed: var(--color-canvas);
   --toggle-dot-margin: 1px;
   --toggle-dot-height: calc(var(--toggle-height) - 2 * var(--toggle-dot-margin) - 2 * var(--toggle-border-width));
@@ -141,17 +145,6 @@
     background-color: var(--toggle-background-color-disabled);
   }
 
-  .toggle-button {
-    --toggle-dot-background-color: var(--color-accent-primary);
-    --toggle-dot-background-color-hover: var(--color-accent-primary-hover);
-    --toggle-dot-background-color-active: var(--color-accent-primary-active);
-    --toggle-dot-background-color-on-pressed: var(--button-background-color);
-    --toggle-background-color-disabled: var(--button-background-color-disabled);
-    --toggle-border-color-hover: var(--border-interactive-color-hover);
-    --toggle-border-color-active: var(--border-interactive-color-active);
-    --toggle-border-color-disabled: var(--border-interactive-color-disabled);
-  }
-
   .toggle-button:enabled:hover {
     border-color: var(--toggle-border-color-hover);
   }
@@ -175,6 +168,24 @@
     border-color: var(--toggle-dot-background-color-hover);
   }
 
+  .toggle-button:hover::before,
+  .toggle-button:active::before {
+    background-color: var(--toggle-dot-background-color-hover);
+  }
+}
+
+@media (forced-colors) {
+  .toggle-button {
+    --toggle-dot-background-color: var(--color-accent-primary);
+    --toggle-dot-background-color-hover: var(--color-accent-primary-hover);
+    --toggle-dot-background-color-active: var(--color-accent-primary-active);
+    --toggle-dot-background-color-on-pressed: var(--button-background-color);
+    --toggle-background-color-disabled: var(--button-background-color-disabled);
+    --toggle-border-color-hover: var(--border-interactive-color-hover);
+    --toggle-border-color-active: var(--border-interactive-color-active);
+    --toggle-border-color-disabled: var(--border-interactive-color-disabled);
+  }
+
   .toggle-button[aria-pressed="true"]:enabled::after {
     border: 1px solid var(--button-background-color);
     content: '';
@@ -189,10 +200,4 @@
   .toggle-button[aria-pressed="true"]:enabled:active::after {
     border-color: var(--toggle-border-color-active);
   }
-
-  .toggle-button:hover::before,
-  .toggle-button:hover:active::before,
-  .toggle-button:active::before {
-    background-color: var(--toggle-dot-background-color-hover);
-  }
 }