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 <sunil@medhas.org>
Reviewed-by: James Valleroy <jvalleroy@mailbox.org>
This commit is contained in:
Sunil Mohan Adapa 2025-11-29 11:03:14 +05:30 committed by James Valleroy
parent a0fe5e50eb
commit 37e40883e1
No known key found for this signature in database
GPG Key ID: 77C0C75E7B650808

View File

@ -8,7 +8,11 @@
--progress-color: #3498db; /* Blue */ --progress-color: #3498db; /* Blue */
--freedombox-navbar-color: white; --freedombox-navbar-color: white;
--freedombox-navbar-shadow-color: rgba(0, 0, 0, 0.25); --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; border-radius: 0.8125rem;
width: 3.125rem; width: 3.125rem;
height: 1.625rem; height: 1.625rem;
background: #ccc; background: var(--freedombox-toggle-button-bg);
--bs-btn-hover-bg: #ccc; --bs-btn-hover-bg: var(--freedombox-toggle-button-bg);
--bs-btn-disabled-bg: #ccc; --bs-btn-disabled-bg: var(--freedombox-toggle-button-bg);;
--bs-btn-disabled-border-color: transparent; --bs-btn-disabled-border-color: transparent;
position: relative; position: relative;
} }
@ -706,7 +710,7 @@ footer {
height: 1.5rem; height: 1.5rem;
width: 1.5rem; width: 1.5rem;
border-radius: 100%; border-radius: 100%;
background: #fff; background: var(--bs-body-bg);
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 0%; left: 0%;
@ -726,8 +730,8 @@ footer {
.toggle-button.running-status-button::before { .toggle-button.running-status-button::before {
top: 0; top: 0;
border: 0.25rem solid var(--neutral-light-color); border: 0.25rem solid var(--bs-body-bg);
border-top: 0.25rem solid var(--progress-color); border-top-color: var(--freedombox-blue-color);
animation: spin 1s linear infinite; animation: spin 1s linear infinite;
} }