feat: light mode polish and theme transition fixes#14
Merged
Conversation
- Light Minimal palette: near-white bg, near-black text, darkened accents for WCAG AA - [dark_mode]/[light_mode] ASCII bracket toggle in navbar - Char scramble animation on theme switch (ASCII noise → resolves to new theme) - FOUC prevention via inline script reading localStorage before paint - CSS var overrides for hardcoded Tailwind colors in light mode - Hero canvas bg reads --bg CSS var instead of hardcoded #0a0a0a - Navbar scroll bg uses color-mix with CSS vars for theme awareness - Playwright a11y test for light mode (axe-core)
…lors - Remove cyan border/color from theme toggle button; use var(--fg) instead - Fix ThemeTransition overwriting button label by deferring text update to theme-transition-complete event (fired after animation restores originals) - Fix ASCII canvas not redrawing after theme switch by dispatching theme-changed event and moving `locked` out of the isDesktop block so it stays in scope - Lock ASCII canvas background to #0a0a0a with rounded corners regardless of theme - Add missing light mode overrides for text-white, hover:text-white, hover:text-white/70, and hover:border-white - Replace hardcoded border-[#1e1e1e]/divide-[#1e1e1e] in Experience and FAQ with border-(--border)/divide-(--border) to fix inconsistent separator colors
- text-white/50 → rgba(0,0,0,0.62) for 5.4:1 contrast on #f8f8f8 - accent-green → #1a6b40 for sufficient contrast on light background
- Restore innerHTML instead of textContent so <span> children and <br> tags survive the scramble animation - Use <h2> for Contact section label to match other sections, preventing the flex header div from being scrambled (and 06/06 from shifting)
Raigato
changed the title
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
var(--fg)theme-transition-completeevent so ThemeTransition's DOM restore doesn't overwrite itlockedwas scoped insideisDesktopblock and unreachable by thetheme-changedlistener; moved to outer scope#0a0a0awithborder-radius: 8pxregardless of theme<span>children causing ThemeTransition to scramble the flex container directly; replaced with<h2>to match other sectionsinnerHTMLinstead oftextContent, preserving<br>tags and sibling elementstext-white,hover:text-white,hover:text-white/70,hover:border-whiteborder-[#1e1e1e]/divide-[#1e1e1e]in Experience and FAQ withborder-(--border)/divide-(--border)to fix inconsistent separator colortext-white/50and--accent-greenin light mode to meet WCAG AA (4.5:1) contrast ratio