schema-apps: add polished dark mode#10
Merged
Merged
Conversation
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.
By Charlie 🤖. Adds a
@media (prefers-color-scheme: dark)block to app.css. Light theme is completely untouched.Approach
Color variable overrides — all semantic tokens remapped:
--ink→ #e4e8f1 (high contrast on dark)--ink-2→ #c9cdd8 (softer secondary text)--muted→ #8b8fa3,--muted-2→ #6b6f82--line→ #262a3a,--line-2→ #1e2130 (subtle dividers)--card→ #161927,--surface→ #1c1f31 (layered dark surfaces)Background — body goes to #0e1019 with softer radial gradients (8% opacity, down from 10%)
Header band — darkened via color-mix 85% with black, softer dot-grid (.08 opacity), dimmed sheen, glassmorphism icon with lower opacity
Inputs — surface background, darker hover borders, focus uses near-black background blend, adjusted focus ring opacity
Code block — already dark; nudged to #0a0d14 with #b8c0d0 text for better contrast on dark surrounds
What I did NOT touch: layout, spacing, typography sizes/weights, animations, any HTML/JS. Pure color-only overrides via the media query. All 7 apps pass gate.