ske087/digiserver-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix all remaining dark-theme colour bugs across the templates

Browse Source 
Follow-up to the player-modal / maintenance-page fix: the same root cause --
colours hard-coded for the light theme -- affected the whole app, in two
places.

1) Inline style attributes (inline outranks the theme rules, so the light
   value survives dark mode and the inherited text colour turns
   light-on-light). base.html now carries a single, property-scoped
   dark-mode override layer that maps every light literal found in the
   templates to the theme variables: light backgrounds/whites -> dark
   surfaces, semantic pastels -> dark equivalents, dark text -> light text,
   light borders -> dark borders, plus .back-link. Scoped to
   body.dark-mode, so the light theme is untouched. This covers all
   templates, including ones not edited here and any added later.

2) Page-level <style> blocks with no dark support:
   * admin/https_config.html hard-coded a light-only palette (blue-tint
     panels, dark labels) -- added a body.dark-mode block for it.
   * dashboard.html / help.html / manage_player.html coloured text links
     with --primary-color (#7c3aed in dark = too dim). Introduced a
     dedicated --link-color (#667eea light / #a78bfa dark) and used it for
     text links, leaving --primary-color for button/background use.

Verified with an automated luminance scan of all 18 pages in both themes:
dark mode has 0 light backgrounds and 0 dark-on-dark text (the only
remaining light surfaces are the intentional white buttons on the admin
gradient cards), and light mode is unchanged.
This commit is contained in:
scheianu
2026-10-14 22:45:09 +03:00
parent 5b69ccb02b
commit 4dc8506c9b
5 changed files with 258 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/templates/base.html
+166
View File
@@ -18,6 +18,10 @@
--primary-color: #667eea;
--primary-dark: #5568d3;
--secondary-color: #764ba2;
/* Colour for text links. Kept separate from --primary-color so the
primary colour can stay dark enough for button backgrounds while
links remain legible on the matching background. */
--link-color: #667eea;
--bg-color: #f5f7fa;
--card-bg: #ffffff;
--text-color: #2d3748;
@@ -34,6 +38,9 @@
--primary-color: #7c3aed;
--primary-dark: #6d28d9;
--secondary-color: #8b5cf6;
/* Dark background needs a lighter link colour (#7c3aed is too dim
on a dark surface). */
--link-color: #a78bfa;
--bg-color: #1a202c;
--card-bg: #2d3748;
--text-color: #e2e8f0;
@@ -369,6 +376,165 @@
color: var(--text-secondary);
font-size: 0.9rem;
}
/* ================================================================
Dark-mode fixes for INLINE colours
----------------------------------------------------------------
A recurring pattern across the templates is to set colours with
inline style="..." attributes (a few JS blocks build nodes the
same way). An inline declaration outranks every normal rule --
including the body.dark-mode rules above -- so those literals keep
their LIGHT value in dark mode. The text, which inherits the (now
light) --text-color, then ends up light-on-light: unreadable.
Inline styles can only be beaten with !important, so the light
literals are mapped to the theme variables here, centrally, with
the property scoped so a colour used for two things (e.g. #1a202c
is both a dark surface and dark text) is only changed where it is
wrong. This fixes every template at once -- including any future
page that repeats the pattern -- instead of patching each file.
Everything is scoped to body.dark-mode, so the LIGHT theme is
completely untouched.
Ordering matters: selectors have equal specificity, so later rules
win. The bare "#fff" rule is therefore placed BEFORE the "#fff3cd"
/"#fff8e1" ones, because "#fff" is a string prefix of them.
================================================================ */
/* --- White / near-white surfaces -> dark card --------------------- */
body.dark-mode [style*="background: white"], body.dark-mode [style*="background-color: white"],
body.dark-mode [style*="background: #fff"], body.dark-mode [style*="background-color: #fff"],
body.dark-mode [style*="background: #ffffff"], body.dark-mode [style*="background-color: #ffffff"],
body.dark-mode [style*="background: #fefefe"], body.dark-mode [style*="background-color: #fefefe"],
body.dark-mode [style*="background: #f5f7fa"], body.dark-mode [style*="background-color: #f5f7fa"],
body.dark-mode [style*="background: #e9ecef"], body.dark-mode [style*="background-color: #e9ecef"],
body.dark-mode [style*="background: #e0e0e0"], body.dark-mode [style*="background-color: #e0e0e0"],
body.dark-mode [style*="background: #f0f2ff"], body.dark-mode [style*="background-color: #f0f2ff"],
body.dark-mode [style*="background: #e8ebff"], body.dark-mode [style*="background-color: #e8ebff"],
body.dark-mode [style*="background: #e7e9ff"], body.dark-mode [style*="background-color: #e7e9ff"],
body.dark-mode [style*="background: #ede9fe"], body.dark-mode [style*="background-color: #ede9fe"] {
background: var(--card-bg) !important;
}
/* --- Light grey panels -> dark page background -------------------- */
body.dark-mode [style*="background: #f8f9fa"], body.dark-mode [style*="background-color: #f8f9fa"],
body.dark-mode [style*="background: #f0f0f0"], body.dark-mode [style*="background-color: #f0f0f0"],
body.dark-mode [style*="background: #f5f5f5"], body.dark-mode [style*="background-color: #f5f5f5"],
body.dark-mode [style*="background: #f4f4f4"], body.dark-mode [style*="background-color: #f4f4f4"],
body.dark-mode [style*="background: #f8fafc"], body.dark-mode [style*="background-color: #f8fafc"] {
background: var(--bg-color) !important;
}
/* --- Semantic pastel backgrounds -> dark equivalents -------------- */
/* info / blue */
body.dark-mode [style*="background: #d1ecf1"], body.dark-mode [style*="background-color: #d1ecf1"],
body.dark-mode [style*="background: #cce5ff"], body.dark-mode [style*="background-color: #cce5ff"],
body.dark-mode [style*="background: #e7f3ff"], body.dark-mode [style*="background-color: #e7f3ff"],
body.dark-mode [style*="background: #f0f7ff"], body.dark-mode [style*="background-color: #f0f7ff"] {
background: #1e3a5f !important;
}
/* success / green */
body.dark-mode [style*="background: #d4edda"], body.dark-mode [style*="background-color: #d4edda"],
body.dark-mode [style*="background: #d1f0e0"], body.dark-mode [style*="background-color: #d1f0e0"],
body.dark-mode [style*="background: #c6f6d5"], body.dark-mode [style*="background-color: #c6f6d5"] {
background: #1a4d2e !important;
}
/* warning / amber (must stay AFTER the "#fff" rule above) */
body.dark-mode [style*="background: #fff3cd"], body.dark-mode [style*="background-color: #fff3cd"],
body.dark-mode [style*="background: #fff8e1"], body.dark-mode [style*="background-color: #fff8e1"],
body.dark-mode [style*="background: #ffeaa7"], body.dark-mode [style*="background-color: #ffeaa7"],
body.dark-mode [style*="background: #fef3c7"], body.dark-mode [style*="background-color: #fef3c7"],
body.dark-mode [style*="background: #feebc8"], body.dark-mode [style*="background-color: #feebc8"] {
background: #4a3800 !important;
}
/* danger / red */
body.dark-mode [style*="background: #f8d7da"], body.dark-mode [style*="background-color: #f8d7da"],
body.dark-mode [style*="background: #fed7d7"], body.dark-mode [style*="background-color: #fed7d7"] {
background: #4a1a1a !important;
}
/* mid-grey chips / knobs */
body.dark-mode [style*="background: #ccc"], body.dark-mode [style*="background-color: #ccc"],
body.dark-mode [style*="background: #6c757d"], body.dark-mode [style*="background-color: #6c757d"] {
background: #4a5568 !important;
}
/* --- Dark text -> light text -------------------------------------- */
body.dark-mode [style*="color: black"] {
color: var(--text-color) !important;
}
body.dark-mode [style*="color: #6c757d"], body.dark-mode [style*="color:#6c757d"],
body.dark-mode [style*="color: #666"], body.dark-mode [style*="color: #888"],
body.dark-mode [style*="color: #999"], body.dark-mode [style*="color: #aaa"],
body.dark-mode [style*="color: #495057"], body.dark-mode [style*="color: #718096"],
body.dark-mode [style*="color: #7f8c8d"], body.dark-mode [style*="color: #5a6a78"],
body.dark-mode [style*="color: #4a5568"] {
color: var(--text-secondary) !important;
}
body.dark-mode [style*="color: #555"], body.dark-mode [style*="color: #475569"],
body.dark-mode [style*="color: #64748b"] {
color: #cbd5e1 !important;
}
body.dark-mode [style*="color: #333"], body.dark-mode [style*="color: #2c3e50"],
body.dark-mode [style*="color: #000"], body.dark-mode [style*="color: #1a202c"],
body.dark-mode [style*="color: #2d3748"] {
color: var(--text-color) !important;
}
/* links / info blue */
body.dark-mode [style*="color: #0066cc"], body.dark-mode [style*="color: #007bff"],
body.dark-mode [style*="color: #0056b3"], body.dark-mode [style*="color: #0c5460"],
body.dark-mode [style*="color: #004085"], body.dark-mode [style*="color: #3498db"] {
color: #90cdf4 !important;
}
/* success text */
body.dark-mode [style*="color: #155724"], body.dark-mode [style*="color: #156b2e"],
body.dark-mode [style*="color: #28a745"], body.dark-mode [style*="color: #27ae60"],
body.dark-mode [style*="color: #2f855a"] {
color: #86efac !important;
}
/* warning text */
body.dark-mode [style*="color: #856404"], body.dark-mode [style*="color: #92400e"],
body.dark-mode [style*="color: #c05621"], body.dark-mode [style*="color: #e67e22"] {
color: #fbbf24 !important;
}
/* danger text */
body.dark-mode [style*="color: #721c24"], body.dark-mode [style*="color: #dc3545"],
body.dark-mode [style*="color: #e74c3c"], body.dark-mode [style*="color: #e53e3e"],
body.dark-mode [style*="color:#e53e3e"], body.dark-mode [style*="color: #c53030"],
body.dark-mode [style*="color: #b91c1c"] {
color: #fca5a5 !important;
}
/* purple accents */
body.dark-mode [style*="color: #5b21b6"] {
color: #a78bfa !important;
}
/* --- Light borders -> dark borders ------------------------------- */
body.dark-mode [style*="border-top-color: white"] {
border-top-color: var(--border-color) !important;
}
body.dark-mode [style*="#e2e8f0"], body.dark-mode [style*="#dee2e6"],
body.dark-mode [style*="#ddd"], body.dark-mode [style*="#ccc"],
body.dark-mode [style*="#ced4da"], body.dark-mode [style*="#e0e0e0"],
body.dark-mode [style*="#eee"], body.dark-mode [style*="#e9ecef"],
body.dark-mode [style*="#f0f0f0"], body.dark-mode [style*="#f0f2ff"],
body.dark-mode [style*="#888"], body.dark-mode [style*="#999"] {
border-color: #4a5568 !important;
}
body.dark-mode [style*="#c3e6cb"], body.dark-mode [style*="#d1f0e0"] {
border-color: #2f855a !important;
}
body.dark-mode [style*="#f5c6cb"] {
border-color: #c53030 !important;
}
body.dark-mode [style*="#bee5eb"], body.dark-mode [style*="#cce5ff"] {
border-color: #2c5282 !important;
}
/* --- "Back" links (class used across the admin pages) ------------- */
body.dark-mode .back-link {
color: #90cdf4 !important;
}
</style>
{% block extra_css %}{% endblock %}
</head>