[Glitch] Fix toggle button color for light (and dark/default) theme

Port 268856d5d9 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/styles/components.scss

@@ -3586,7 +3586,7 @@ $ui-header-height: 55px;
   height: 20px;
   padding: 0;
   border-radius: 10px;
-  background-color: #626982;
+  background-color: $ui-primary-color;
 }
 
 .react-toggle--focus {
@@ -3609,7 +3609,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;
@@ -3620,6 +3620,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;

app/javascript/flavours/glitch/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)