From 37e40883e1964893cccd5465ffbaf58b6dd1d339 Mon Sep 17 00:00:00 2001 From: Sunil Mohan Adapa Date: Sat, 29 Nov 2025 11:03:14 +0530 Subject: [PATCH] ui: Fix dark theme colors for app enable/disable toggle button Tests: - In the Calibre app page, the enable/disable toggle button has dark colors in dark theme mode. The colors are proper when enabled, disabled, enabling, disabling, hover. Signed-off-by: Sunil Mohan Adapa Reviewed-by: James Valleroy --- static/themes/default/css/main.css | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/static/themes/default/css/main.css b/static/themes/default/css/main.css index 6856663cd..603b120bc 100644 --- a/static/themes/default/css/main.css +++ b/static/themes/default/css/main.css @@ -8,7 +8,11 @@ --progress-color: #3498db; /* Blue */ --freedombox-navbar-color: white; --freedombox-navbar-shadow-color: rgba(0, 0, 0, 0.25); + --freedombox-toggle-button-bg: #ccc; +} +[data-bs-theme="dark"] { + --freedombox-toggle-button-bg: #888; } /* @@ -693,9 +697,9 @@ footer { border-radius: 0.8125rem; width: 3.125rem; height: 1.625rem; - background: #ccc; - --bs-btn-hover-bg: #ccc; - --bs-btn-disabled-bg: #ccc; + background: var(--freedombox-toggle-button-bg); + --bs-btn-hover-bg: var(--freedombox-toggle-button-bg); + --bs-btn-disabled-bg: var(--freedombox-toggle-button-bg);; --bs-btn-disabled-border-color: transparent; position: relative; } @@ -706,7 +710,7 @@ footer { height: 1.5rem; width: 1.5rem; border-radius: 100%; - background: #fff; + background: var(--bs-body-bg); position: absolute; top: 50%; left: 0%; @@ -726,8 +730,8 @@ footer { .toggle-button.running-status-button::before { top: 0; - border: 0.25rem solid var(--neutral-light-color); - border-top: 0.25rem solid var(--progress-color); + border: 0.25rem solid var(--bs-body-bg); + border-top-color: var(--freedombox-blue-color); animation: spin 1s linear infinite; }