ge-aerospace/shopdb-flask
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Scope dark-mode form and notification styles to the explicit theme
Some checks failed
CI / backend (push) Successful in 1m39s
Details
CI / naming (push) Successful in 2s
Details
CI / frontend (push) Successful in 8s
Details
CI / migrations-mysql (push) Failing after 8s
Details

Browse Source 
The form-control and notification-tint blocks applied on the OS
prefers-color-scheme alone, so a machine in OS dark mode leaked dark
widget styling into the app's explicit light theme - dropdown options
rendered near-black on black. The theme store always stamps data-theme
at startup, so scope these rules to [data-theme=dark]. Dropdown options
in dark mode use the solid card background instead of the text color.
This commit is contained in:
cproudlock
2026-07-16 15:11:35 -04:00
parent 97f7dfb0de
commit f5f67172aa
1 changed files with 25 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
frontend/src/assets/style.css
View File

@@ -624,26 +624,26 @@ input[type="radio"] {
cursor: pointer;
}
/* Dark mode form adjustments */
@media (prefers-color-scheme: dark) {
.form-control {
background: var(--bg);
border-color: var(--border);
}
/* Dark mode form adjustments. Scoped to the explicit theme attribute (the
theme store always stamps it at startup) - a bare prefers-color-scheme
query here leaks dark widget styles into light mode on dark-OS machines. */
[data-theme="dark"] .form-control {
background: var(--bg);
border-color: var(--border);
}
.form-control:focus {
background: var(--bg);
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}
[data-theme="dark"] .form-control:focus {
background: var(--bg);
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}
select.form-control {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-color: var(--bg);
}
[data-theme="dark"] select.form-control {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23999' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
background-color: var(--bg);
}
select.form-control option {
background: var(--text);
}
[data-theme="dark"] select.form-control option {
background: var(--bg-card-solid);
}
/* Form grid */
@@ -1726,16 +1726,14 @@ td.actions .btn + .btn {
text-decoration: underline;
}
@media (prefers-color-scheme: dark) {
.notification-item.type-incident {
background: rgba(245, 54, 92, 0.1);
}
.notification-item.type-change {
background: rgba(255, 136, 0, 0.1);
}
.notification-item.type-awareness {
background: rgba(4, 185, 98, 0.1);
}
[data-theme="dark"] .notification-item.type-incident {
background: rgba(245, 54, 92, 0.1);
}
[data-theme="dark"] .notification-item.type-change {
background: rgba(255, 136, 0, 0.1);
}
[data-theme="dark"] .notification-item.type-awareness {
background: rgba(4, 185, 98, 0.1);
}
/* Light mode is now default, dark mode via prefers-color-scheme */