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

Fix the Fleet tile and health colours in dark mode

Browse Source 
Two colour bugs on the same page, both invisible in light mode.

A button does not inherit color the way it inherits font, so the plain
Endpoints total rendered in the browser default black on the dark theme's card.
The coloured tiles set their own color, which is why only that one showed it.

The coloured ones were wrong too, just less obviously: dark mode redefines
--success and --warning to bright variants but leaves --success-dark and
--warning-dark tuned for a white background, so those numbers and the health
pills came out dark green and dark amber on a dark blue card.

Scoped to the stamped [data-theme="dark"] rather than a prefers-color-scheme
query, matching the note in style.css: the theme store always stamps the
attribute, and a bare media query leaks dark styling into light mode on a
dark-OS machine.
This commit is contained in:
cproudlock
2026-08-28 22:15:09 -04:00
parent 54f0857e13
commit 4c43c4e1ba
1 changed files with 20 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
plugins/endpoints/frontend/views/EndpointsList.vue
View File

@@ -274,6 +274,11 @@ function changePerPage(newPerPage) {
padding: 0.8rem 0.95rem;
cursor: pointer;
font: inherit;
/* A button does NOT inherit color the way it inherits font, so without this
the tile renders in the browser default black - invisible on the dark
theme's card. The coloured tiles set their own color and hid the bug; the
plain total did not. */
color: var(--text);
text-align: left;
}
@@ -296,6 +301,21 @@ function changePerPage(newPerPage) {
.fleet-tile.warn .n { color: var(--warning-dark); }
.fleet-tile.bad .n { color: var(--danger); }
/* Dark mode redefines --success and --warning to bright variants, but NOT the
-dark ones, which stay tuned for a white background. Left alone they render
dark green and dark amber on the dark card. Scoped to the stamped attribute
(the theme store always sets it) rather than prefers-color-scheme, which
would leak dark styling into light mode on a dark-OS machine. */
[data-theme="dark"] .fleet-tile.ok .n { color: var(--success); }
[data-theme="dark"] .fleet-tile.warn .n { color: var(--warning); }
.health-pill.ok { color: var(--success-dark); }
.health-pill.warning { color: var(--warning-dark); }
.health-pill.critical { color: var(--danger); }
[data-theme="dark"] .health-pill.ok { color: var(--success); }
[data-theme="dark"] .health-pill.warning { color: var(--warning); }
.fleet-filter { max-width: 200px; }
.status-dot {
@@ -324,7 +344,4 @@ function changePerPage(newPerPage) {
color: var(--text-light);
}
.health-pill.ok { color: var(--success-dark); }
.health-pill.warning { color: var(--warning-dark); }
.health-pill.critical { color: var(--danger); }
</style>