feat(ui): rework dark-mode palette to near-OLED (Dark-Reader-inspired)#58
Merged
Conversation
Swap the GitHub-Primer dark palette for the surface tokens planted in Slice C, mechanical hex-by-hex across dark-mode.css and the four templates with inline dark:bg-[#…] arbitrary values: page bg #0d1117 → #0a0a0a (near-OLED, matches --qg-surface) card / panel #161b22 → #111113 (1-step lift, matches --qg-surface-2) border #30363d → #1f1f23 (subtle, matches --qg-border) ink #e6edf3 → #e7e5e0 (warm cream, less blue cast) bg-slate-100/800 override #21262d → #17181c (track the new card surface) hover lift #2d333b → #25272d (one step above card) Why: the previous palette was a GitHub-Primer copy and the recent UX critique flagged dark mode as "light-mode-flipped." With Dark Reader enabled the user found the page noticeably warmer, blacker, and more dev-tool-like; this rework matches that target with a single palette swap instead of a per-component rebuild. System theme toggle behavior is unchanged — base.html already defaults to prefers-color-scheme and persists user overrides to localStorage.
This was referenced May 14, 2026
ringo380
added a commit
that referenced
this pull request
May 14, 2026
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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Replace the GitHub-Primer-style dark palette with the surface tokens planted (but never wired) in Slice C. Single mechanical hex swap across
dark-mode.cssand the four templates carrying inlinedark:bg-[#…]arbitrary values.Why
Side-by-side screenshots showed Dark Reader's auto-rework reading noticeably warmer, blacker, and more "dev tool" than the native dark theme. The UX-pass critique (
02-critique.md#8) already flagged dark mode as "light-mode-flipped" and proposed a#0a0a0abase; Slice C even planted the surface tokens but only used them for one demo surface. This wires them everywhere.Theme toggle behavior
Unchanged.
base.htmlalready defaults toprefers-color-schemeand persists user overrides tolocalStoragevia the.theme-togglebutton — that established in the original dark-mode shipping work. No new toggle, no migration.Test plan
python manage.py check→ 0 issues (passes)/,/login/,/register/→ 200/,/grade/,/grade/results/<id>/,/history/,/account/); verify no contrast regression#161b22).qg-line-issuebackground still distinct against new bg