fix(theseus/light): darker --acid in light mode so brand green stays legible

#d6ff3d on a #ffffff / #f6f8fb background sits at ~1.3:1 contrast — the
acid green went almost invisible any time the user flipped Settings >
Theme to light. Override --acid to #4d7300 in every chrome page's
prefers-color-scheme: light block. Same hue family, ~5.5:1 contrast
on white, still reads as the same brand color.

Also: chrome.html was missing --acid: #d6ff3d in :root entirely (every
site used var(--acid, #d6ff3d) fallbacks). Adding the real declaration
means the light override can actually take effect.

Files touched: chrome.html, home.html, settings.html, error.html,
approval.html, messages.html. downloads.html is a dark-only overlay
(hardcoded), collision.html already had a proper light-mode --bcdn.
Tint fills (rgba(214,255,61,X) at low alpha) stay as-is — the specific
hue barely matters through 8% opacity.

Verified live via CDP: getComputedStyle(--acid) returned #d6ff3d in
dark, #4d7300 after cfg.set('theme','light').
This commit is contained in:
Local Dev 2026-09-06 21:12:45 +02:00
parent f269a23e5f
commit 878b728ef8
6 changed files with 27 additions and 5 deletions

View file

@ -9,7 +9,9 @@
--ink:#e7eaf1; --mut:#8b98a9; --dim:#5e6678; --acid:#d6ff3d; --danger:#f6768a; }
@media (prefers-color-scheme: light) {
:root { --surface:#ffffff; --surface2:#f1f4fa; --line:rgba(0,0,0,.12);
--ink:#1a1f2b; --mut:#5c6577; --dim:#8a93a5; }
--ink:#1a1f2b; --mut:#5c6577; --dim:#8a93a5;
/* Darker acid for light backgrounds — ~5.5:1 on white. */
--acid:#4d7300; }
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: transparent; }

View file

@ -7,12 +7,20 @@
--bg:#0f1420; --surface:#1b2330; --surface2:#171e2a; --active:#263041cc;
--ink:#e7eaf1; --mut:#b9c2d0; --dim:#8b98a9; --faint:#5e6678;
--line:rgba(255,255,255,.20); --line2:rgba(255,255,255,.13); --hover:rgba(255,255,255,.08);
/* Brand acid green. #d6ff3d reads ~10:1 on the dark ground; a darker
variant kicks in for light mode below so it stays legible. */
--acid:#d6ff3d;
}
@media (prefers-color-scheme: light) {
:root {
--bg:#e9ecf1; --surface:#ffffff; --surface2:#f1f3f7; --active:#dbe1ec;
--ink:#1a1f28; --mut:#3c4453; --dim:#697280; --faint:#98a1b0;
--line:rgba(0,0,0,.18); --line2:rgba(0,0,0,.11); --hover:rgba(0,0,0,.06);
/* Darker acid for light backgrounds — same hue family, ~5.5:1
contrast on #ffffff so text and single-pixel accents stay
readable. Tint fills (rgba(214,255,61,.08) etc.) stay as-is:
at low alpha the specific hue barely matters. */
--acid:#4d7300;
}
}
[hidden] { display: none !important; }

View file

@ -10,7 +10,9 @@
--warn:#ffc75f; --err:#f6768a; --info:#4b7bec; }
@media (prefers-color-scheme: light) {
:root { --bg:#f6f8fb; --panel:#ffffff; --panel2:#f0f4f9; --line:rgba(0,0,0,.10);
--ink:#1a1f2b; --mut:#5c6577; --dim:#8a93a5; }
--ink:#1a1f2b; --mut:#5c6577; --dim:#8a93a5;
/* Darker acid for light backgrounds — ~5.5:1 on white. */
--acid:#4d7300; }
}
* { box-sizing: border-box }
html, body { margin: 0; height: 100% }

View file

@ -105,8 +105,10 @@
@media (prefers-color-scheme: light) {
:root { --bg1: #dce6f2; --bg2: #eef0f4;
--card: #ffffff; --card-hi: #f4f7fb; --line: rgba(0,0,0,.10); --line2: rgba(0,0,0,.14);
--ink: #1a1f28; --mut: #4a5262; --dim: #8a93a2; }
h1 .g { color: #4a8a00; }
--ink: #1a1f28; --mut: #4a5262; --dim: #8a93a2;
/* Darker acid for light backgrounds — ~5.5:1 on white. */
--acid: #4d7300; }
h1 .g { color: var(--acid); }
.modal { background: #ffffff; }
}
</style></head>

View file

@ -9,6 +9,14 @@
--ink:#e7eaf1; --mut:#8b98a9; --dim:#5e6678; --acid:#d6ff3d;
--ok:#4fd1a5; --err:#f6768a; --warn:#ffc75f;
}
@media (prefers-color-scheme: light) {
:root{
--bg:#f6f8fb; --panel:#ffffff; --panel2:#f0f4f9; --line:rgba(0,0,0,.10);
--ink:#1a1f28; --mut:#3c4453; --dim:#697280;
/* Darker acid for light backgrounds — ~5.5:1 on white. */
--acid:#4d7300;
}
}
*{box-sizing:border-box}
html,body{height:100%}
body{

View file

@ -38,7 +38,7 @@
nativeTheme.themeSource, which drives prefers-color-scheme — so pinning
color-scheme via that media query keeps the popup in sync automatically. */
:root { color-scheme: dark; }
@media (prefers-color-scheme: light) { :root { color-scheme: light; } }
@media (prefers-color-scheme: light) { :root { color-scheme: light; --acid:#4d7300; } }
/* Explicit option styling — Chromium respects it in the popup on Windows. */
select option { background: #1b2330; color: var(--ink); }
@media (prefers-color-scheme: light) { select option { background: #f1f3f7; color: #1a1f28; } }