fix(ui): make dark mode coherent across cards, modals, inputs#264
Merged
Conversation
Component CSS hardcoded #fff surfaces, rgba(255,255,255,X) hover films, and baked light-slate washes that never respected data-theme="dark", so compose/settings cards, modals, inputs, and popovers rendered white on the dark background. Tokenize the offending surfaces so the existing dark overrides apply: - tokens.css: add --hover (surface hover film) and --amber-* banner tokens to the [data-theme="dark"] and system-dark override blocks. - Surface #fff -> var(--bg-card): compose modal sheet, settings cards/modals/popovers/inputs/selects/textareas/key-card/tier/btn backgrounds, sidebar active nav, message-list selected card, topbar search focus. - rgba(255,255,255,X) hover films -> var(--hover): settings nav/back/ btn-secondary, sidebar nav, message-card, detail buttons. - Baked light washes (rgba(241,245,249,X) / rgba(248,250,252,X)) -> var(--c1) or var(--hover): settings bars/foots/side/sub-rows, topbar, compose foot. - Amber backup banner now resolves via var(--amber-ink/bg/border) -> light amber on dark. White-on-color button text, toggle knob, and trust ticks left as-is. Login (.fm-pre) is intentionally light-only and untouched.
iduartgomez
force-pushed
the
fix/dark-mode-theme
branch
from
b3a8e15 to
74cf251
Compare
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.
Problem
Dark mode rendered incoherently: compose/new-message modals, Settings/Appearance cards, inputs, and popovers showed as white on the dark background. Theme tokens existed, but component CSS hardcoded
#fffsurfaces,rgba(255,255,255,X)hover films, and baked light-slate washes that never picked up thedata-theme="dark"overrides.Fix
Tokenize the offending surfaces so the existing dark overrides in
tokens.cssapply. CSS-only — static vendor assets, no rebuild.--hover(surface hover film) and--amber-*banner tokens to the[data-theme="dark"]and system-dark override blocks.#fff→var(--bg-card): compose modal sheet; settings cards/modals/popovers/inputs/selects/textareas/key-card/tier/button backgrounds; sidebar active nav; message-list selected card; topbar search focus.rgba(255,255,255,X)hover films →var(--hover): settings nav/back/btn-secondary, sidebar nav, message-card, detail buttons.rgba(241,245,249,X)/rgba(248,250,252,X)) →var(--c1)/var(--hover): settings bars/foots/side/sub-rows, topbar, compose foot.var(--amber-ink/bg/border)→ light amber on dark.Left intentionally unchanged: white-on-color button text, toggle knob, trust ticks (correct on colored fills). Login (
.fm-pre) is light-only by design and untouched.Verification
Verified live via Playwright at dark theme — compose modal + settings cards/inputs render dark and readable; amber banner computes
color: rgb(251,191,36)onrgba(217,119,6,0.12).Scope
7 CSS files only. Branched off
main, independent of the in-flight quarantine/contact-modal work.