diff --git a/approval.html b/approval.html index 171351c..a17a8ca 100644 --- a/approval.html +++ b/approval.html @@ -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; } diff --git a/chrome.html b/chrome.html index 17deb1f..cb93edd 100644 --- a/chrome.html +++ b/chrome.html @@ -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; } diff --git a/error.html b/error.html index d130b52..abc115a 100644 --- a/error.html +++ b/error.html @@ -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% } diff --git a/home.html b/home.html index a3bea5b..78f74a6 100644 --- a/home.html +++ b/home.html @@ -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; } } diff --git a/messages.html b/messages.html index abf0a12..3bbc455 100644 --- a/messages.html +++ b/messages.html @@ -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{ diff --git a/settings.html b/settings.html index a6b175e..307fa64 100644 --- a/settings.html +++ b/settings.html @@ -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; } }