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/admin/https_config.html
+86
View File
@@ -577,6 +577,92 @@
width: 100%;
}
}
/* ------------------------------------------------------------------
Dark theme
------------------------------------------------------------------
This page predates the shared dark-mode variables and hard-coded its
own light palette (light panel/blue-tint backgrounds with dark text).
The rules below re-map those to dark equivalents so the page matches
the rest of the app when the dark theme is active.
------------------------------------------------------------------ */
body.dark-mode .back-link { color: #90cdf4; }
body.dark-mode .status-detection {
background: #1e3a5f;
border-left-color: #90cdf4;
}
body.dark-mode .badge-success { background: #1a4d2e; color: #86efac; }
body.dark-mode .badge-warning { background: #4a3800; color: #fbbf24; }
body.dark-mode .status-card { border-left-color: #4a5568; }
body.dark-mode .status-enabled {
background: linear-gradient(135deg, #1a4d2e 0%, #22543d 100%);
}
body.dark-mode .status-disabled {
background: linear-gradient(135deg, #4a3800 0%, #5a4a1e 100%);
}
body.dark-mode .status-badge { background: #276749; color: #e2e8f0; }
body.dark-mode .status-badge-inactive { background: #b45309; color: #fff; }
body.dark-mode .status-details code { background: rgba(255, 255, 255, 0.12); }
body.dark-mode .info-text {
background: #1e3a5f;
border-left-color: #90cdf4;
color: #cbd5e1;
}
body.dark-mode .form-group label { color: var(--text-color); }
body.dark-mode .form-input {
background: var(--card-bg);
color: var(--text-color);
border-color: var(--border-color);
}
body.dark-mode .form-input:focus { border-color: #90cdf4; }
body.dark-mode .form-hint { color: var(--text-secondary); }
body.dark-mode .required { color: #fca5a5; }
body.dark-mode .toggle-slider { background: #4a5568; }
body.dark-mode .toggle-slider::after { background: #e2e8f0; }
body.dark-mode .toggle-input:checked + .toggle-slider { background: #276749; }
body.dark-mode .toggle-text { color: var(--text-color); }
body.dark-mode .preview-section {
background: var(--bg-color);
border-color: #90cdf4;
}
body.dark-mode .preview-section h3 { color: #90cdf4; }
body.dark-mode .access-points li {
background: var(--card-bg);
border-left-color: #90cdf4;
}
body.dark-mode .access-points code { background: #1e3a5f; color: #90cdf4; }
body.dark-mode .form-actions { border-top-color: var(--border-color); }
body.dark-mode .info-card {
background: linear-gradient(135deg, #1e3a5f 0%, #162032 100%);
}
body.dark-mode .info-card h2 { color: #90cdf4; }
body.dark-mode .info-card li { color: var(--text-secondary); }
body.dark-mode .nginx-status-card {
background: linear-gradient(135deg, #162032 0%, #1e3a5f 100%);
border-left-color: #90cdf4;
}
body.dark-mode .nginx-status-card h2 { color: #90cdf4; }
body.dark-mode .status-item {
background: var(--card-bg);
border-left-color: #90cdf4;
}
body.dark-mode .status-item strong { color: var(--text-color); }
body.dark-mode .status-item code { background: #1e3a5f; color: #90cdf4; }
body.dark-mode .info-section h3 { color: #90cdf4; }
body.dark-mode .info-section li { color: var(--text-secondary); }
</style>
<script>