diff --git a/app/styles/components/react-toggle.scss b/app/styles/components/react-toggle.scss
index 699b6e86d..e2be2ef14 100644
--- a/app/styles/components/react-toggle.scss
+++ b/app/styles/components/react-toggle.scss
@@ -32,7 +32,7 @@
   height: 24px;
   padding: 0;
   border-radius: 30px;
-  background-color: var(--foreground-color);
+  background-color: hsla(var(--brand-color_h), var(--brand-color_s), var(--brand-color_l), 0.35);
   transition: background-color 0.2s ease;
 }
 
diff --git a/app/styles/components/theme-toggle.scss b/app/styles/components/theme-toggle.scss
index c0cadc68f..1f2697b89 100644
--- a/app/styles/components/theme-toggle.scss
+++ b/app/styles/components/theme-toggle.scss
@@ -9,6 +9,10 @@
     .react-toggle {
       vertical-align: middle;
 
+      &-track {
+        background-color: var(--foreground-color);
+      }
+
       &-track-check,
       &-track-x {
         display: flex;