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 675a01dd3..493e377d6 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 047d9d973..b6dc1abc9 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;