Skip to content

fix(ui): soften saturated accents in dark mode#60

Merged
ringo380 merged 1 commit into
mainfrom
fix/dark-mode-soften-accents
May 14, 2026
Merged

fix(ui): soften saturated accents in dark mode#60
ringo380 merged 1 commit into
mainfrom
fix/dark-mode-soften-accents

Conversation

@ringo380
Copy link
Copy Markdown
Owner

@ringo380 ringo380 commented May 14, 2026

Why

The near-OLED palette swap (#58) lowered surface luminance to `#0a0a0a` but left every accent at light-mode saturation. Result: the Register button, selected DB chip, and credits pill punch harder than the actual headings — they read as UI alerts, not brand accents. Visible in the user-reported screenshots from the post-#58 review.

Three targeted overrides in dark-mode.css

Surface Before After Rationale
Primary indigo CTA at-rest `#4f46e5` (indigo-600) `#4338ca` (indigo-700) Mute the resting state so it sits at heading luminance, not above.
Primary indigo CTA hover `#4338ca` (indigo-700) `#6366f1` (indigo-500) Hover brightens, inverting the light-mode affordance direction (where hover darkens) — preserves "this is intent" feedback.
Selected DB chip `bg-white text-slate-900` (pure white) `bg-[#e7e5e0] text-[#0a0a0a]` (warm cream) Pure white on near-OLED was the harshest contrast on the page; warm cream still reads as "selected" without screaming. Scoped to `[role="radio"][aria-checked="true"]` so other `dark:bg-white` usages are unaffected.
Credits / grade-A emerald pill text `#6ee7b7` (emerald-300) `#34d399` (emerald-400) ~30% less luminous on the same rgba bg; still readable.

No template churn — single CSS file edit.

Out of scope (deliberately deferred)

  • Wordmark `#a5b4fc` softening — brand-identity call.
  • Q-ring logo stroke desaturation — brand-identity call.
  • Navbar shadow seam (separate report: `html.dark .shadow-sm` is forcing a heavy custom shadow despite `dark:shadow-none`). Tracked for a follow-up.

Verification

  • `collectstatic --clear` → 169 files, 799 post-processed, no missing refs.
  • `python manage.py check` → 0 issues.
  • Cascade check: `html.dark .bg-indigo-600` (0,2,1) beats Tailwind's `.bg-indigo-600` (0,1,0); `html.dark [role="radio"][aria-checked="true"]` (0,3,1) beats `html.dark .dark\:bg-white` (0,2,1).

Test plan

  • Railway redeploy completes; new content-hashed `dark-mode..css` URL is served
  • `/` and `/grade/` Register / Grade-my-query buttons no longer dominate the navbar / page
  • DB chip group: clicking through MySQL/PG/SQLite shows warm cream selected state (no white blowout)
  • Hover the primary CTA: should visibly brighten in dark mode
  • Credits pill emerald reads softer; grade-A pills on `/account/` and history match the new tone

@ringo380
fix(ui): soften saturated accents in dark mode
261c73a 
The near-OLED palette swap (PR #58) lowered surface luminance but left
every accent at light-mode saturation, so primary CTAs, the selected DB
chip, and the emerald credits pill now punch harder than the headings.
Three targeted overrides in dark-mode.css, no template churn.

1. Primary indigo CTA mute: at-rest .bg-indigo-600 drops to indigo-700
   (#4338ca) instead of indigo-600 (#4f46e5). Hover bumps to indigo-500
   (#6366f1) — inverting the affordance direction vs light mode (where
   hover darkens) so intent still reads as a brighten step.
2. Selected DB chip: replace dark:bg-white pure-white pill with warm
   cream (#e7e5e0). Pure white on #0a0a0a was the worst contrast on the
   page and read as a UI block, not a "this is selected" affordance.
   Scoped to [role="radio"][aria-checked="true"] so it only affects the
   chip group and not any other dark:bg-white usages.
3. Emerald credits pill text: emerald-300 (#6ee7b7) → emerald-400
   (#34d399). Still distinct against the rgba(16,185,129,0.22) bg,
   ~30% less luminous. Applies to all grade-A pills consistently.

Held off on softening the wordmark (#a5b4fc) and the Q-ring logo
strokes — those are brand-identity calls and deserve a deliberate
decision rather than a mechanical desaturation.
@ringo380 ringo380 merged commit a6c1d92 into main May 14, 2026
@ringo380 ringo380 deleted the fix/dark-mode-soften-accents branch May 14, 2026 04:00
@ringo380 ringo380 mentioned this pull request May 14, 2026
Merged
3 tasks
ringo380 added a commit that referenced this pull request May 14, 2026
@ringo380
fix(ui): restrain dark-mode pills (chip wash + lower pill bg opacity) (…
4bc816f 
…#61)

User feedback after PR #60: the "warm cream" selected chip was still a
near-white block, and the emerald credits pill was still glowing at 22%
saturation. Both read as bright UI alerts in an otherwise muted dark
palette — wrong for the dark-mode aesthetic regardless of the hex codes
under them.

Selected DB chip: replace cream-on-black with an indigo wash. Background
`rgba(99,102,241,0.18)`, text `#c7d2fe` (indigo-200), inset 1px indigo
border via box-shadow so the affordance comes from brand color rather
than brute-force luminance contrast. Still visually distinct from the
unselected `#17181c` slate chips; quiet against the `#0a0a0a` page.

Grade/status pill backgrounds: halve opacity (22-28% → 10-16%) across
emerald / lime / amber / orange / red. Text colors mostly preserved
(lime gets bumped to #a3e635 for the lower-opacity bg). Pills now read
as ambient indicators with colored text floating on near-black, not as
glowing chips. Same selector as before — applies to the credits pill in
the navbar and the grade pill on results/account/history pages.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@ringo380