From ddd09f9a16feb8a79849fb9266509566c6224e46 Mon Sep 17 00:00:00 2001 From: juanatsap Date: Wed, 19 Nov 2025 09:38:24 +0000 Subject: [PATCH] fix: Improve color theme button colors for better distinction **Issue**: Color theme button colors were too similar to other buttons - Light mode (sun): Orange #f39c12 - same as keyboard button - Dark mode (moon): Blue #3498db - same as zoom button **Fix**: Updated to more distinctive colors Light mode (sun): - Was: Orange #f39c12 (same as keyboard) - Now: Gold/Bright Yellow #ffd700 (distinct sun color) Dark mode (moon): - Was: Bright Blue #3498db (same as zoom) - Now: Dark Slate Blue #2c3e50 (darker "nighty" blue) Auto mode: - Kept: Purple #9b59b6 (already distinctive) **Result**: Color theme button now has unique, semantic colors that clearly represent sun (bright yellow) and moon (dark night blue) without conflicting with other buttons. Updated both hover and at-bottom states for consistency. --- static/css/color-theme.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/static/css/color-theme.css b/static/css/color-theme.css index 2e0a63d..2d0a147 100644 --- a/static/css/color-theme.css +++ b/static/css/color-theme.css @@ -182,11 +182,11 @@ /* Dynamic colors ONLY on hover based on active theme mode */ .color-theme-switcher:hover[data-theme-mode="light"] { - background: #f39c12 !important; /* Warm sun yellow for light mode */ + background: #ffd700 !important; /* Bright sun yellow (gold) for light mode */ } .color-theme-switcher:hover[data-theme-mode="dark"] { - background: #3498db !important; /* Cool moon blue for dark mode */ + background: #2c3e50 !important; /* Dark nighty blue for dark mode */ } .color-theme-switcher:hover[data-theme-mode="auto"] { @@ -202,12 +202,12 @@ /* At-bottom state - dynamic colors based on theme mode (matches hover) */ .color-theme-switcher.at-bottom[data-theme-mode="light"] { opacity: 1; - background: #f39c12 !important; /* Warm sun yellow for light mode */ + background: #ffd700 !important; /* Bright sun yellow (gold) for light mode */ } .color-theme-switcher.at-bottom[data-theme-mode="dark"] { opacity: 1; - background: #3498db !important; /* Cool moon blue for dark mode */ + background: #2c3e50 !important; /* Dark nighty blue for dark mode */ } .color-theme-switcher.at-bottom[data-theme-mode="auto"] {