From d71fbf8c06af47fc6627310c76386848582db083 Mon Sep 17 00:00:00 2001 From: gorkem-bwl Date: Sun, 26 Apr 2026 01:55:58 -0400 Subject: [PATCH] fix(client): bump dark-mode selected toggle background so it stands out The 6% primary tint that read fine in light mode disappeared against dark backgrounds. Use a 22% tint in dark mode (30% on hover) and keep the lighter 6/10% in light mode. --- client/src/Components/inputs/ToggleButton.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/client/src/Components/inputs/ToggleButton.tsx b/client/src/Components/inputs/ToggleButton.tsx index e0a6f0ea2..a2b392357 100644 --- a/client/src/Components/inputs/ToggleButton.tsx +++ b/client/src/Components/inputs/ToggleButton.tsx @@ -7,6 +7,13 @@ import { alpha } from "@mui/material/styles"; export const ToggleButtonInput = ({ sx, ...props }: ToggleButtonProps) => { const theme = useTheme(); + const isDark = theme.palette.mode === "dark"; + const selectedBg = isDark + ? alpha(theme.palette.primary.main, 0.22) + : alpha(theme.palette.primary.main, 0.06); + const selectedHoverBg = isDark + ? alpha(theme.palette.primary.main, 0.3) + : alpha(theme.palette.primary.main, 0.1); return ( { backgroundColor: theme.palette.action.hover, }, "&.Mui-selected": { - backgroundColor: alpha(theme.palette.primary.main, 0.06), + backgroundColor: selectedBg, color: theme.palette.text.primary, fontWeight: 500, "&:hover": { - backgroundColor: alpha(theme.palette.primary.main, 0.1), + backgroundColor: selectedHoverBg, }, }, ...sx,