From 268856d5d9f72f003a08a53c7d094ed4df7c16bc Mon Sep 17 00:00:00 2001
From: Erik Uden <erik@uden.ai>
Date: Wed, 13 Mar 2024 12:45:20 +0100
Subject: [PATCH] Fix toggle button color for light (and dark/default) theme
 (#29553)

---
 app/javascript/styles/mastodon-light/diff.scss |  4 ++--
 app/javascript/styles/mastodon/components.scss | 13 +++++++++++--
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/app/javascript/styles/mastodon-light/diff.scss b/app/javascript/styles/mastodon-light/diff.scss
index 675a01dd36..493e377d61 100644
--- a/app/javascript/styles/mastodon-light/diff.scss
+++ b/app/javascript/styles/mastodon-light/diff.scss
@@ -263,11 +263,11 @@ html {
 }
 
 .react-toggle-track {
-  background: $ui-secondary-color;
+  background: $ui-primary-color;
 }
 
 .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
-  background: darken($ui-secondary-color, 10%);
+  background: lighten($ui-primary-color, 10%);
 }
 
 .react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled)
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 047d9d9739..b6dc1abc99 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -3369,7 +3369,7 @@ $ui-header-height: 55px;
   height: 20px;
   padding: 0;
   border-radius: 10px;
-  background-color: #626982;
+  background-color: $ui-primary-color;
 }
 
 .react-toggle--focus {
@@ -3392,7 +3392,7 @@ $ui-header-height: 55px;
   width: 16px;
   height: 16px;
   border-radius: 50%;
-  background-color: $primary-text-color;
+  background-color: $ui-button-color;
   box-sizing: border-box;
   transition: all 0.25s ease;
   transition-property: border-color, left;
@@ -3403,6 +3403,15 @@ $ui-header-height: 55px;
   border-color: $ui-highlight-color;
 }
 
+.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
+  background: darken($ui-primary-color, 5%);
+}
+
+.react-toggle.react-toggle--checked:hover:not(.react-toggle--disabled)
+  .react-toggle-track {
+  background: lighten($ui-highlight-color, 5%);
+}
+
 .switch-to-advanced {
   color: $light-text-color;
   background-color: $ui-base-color;