feat: add warm-cream light mode with system + manual toggle#37
Merged
Conversation
For summer / direct-sunlight visibility. Drives off CSS custom properties so theme switches at runtime; Sass variables alias into the same custom properties so existing partials compile unchanged. - _variables.scss: hoist 18 theme tokens to CSS custom properties (--bg, --surface, --text, --accent, etc.). Sass vars become aliases (e.g. `$bg: var(--bg)`) so existing references keep working - _base.scss: replace single `lighten($accent, 12%)` call with `$accent-hover` (Sass color functions can't operate on var()) - _base.scss: light-mode background — hide #fractal-bg + the blue blueprint grid overlay; render a faint dot-grid on body (engineering paper, calm in sunlight) - _nav.scss: theme-toggle button (sun in dark, moon in light) - base.html: inline bootstrapper in <head> applies saved preference pre-render to avoid flash-of-wrong-theme; toggle button in nav; theme-toggle.js handles click + localStorage persistence - index.html: swap inline #e1e4ed / #808698 hex literals for var(--text) / var(--text-faint) so landing page reads in light mode - blog-page.html: mermaid initialised with theme-matched palette; light variant uses theme: 'default' (rather than 'base') so derived colors don't fall back to dark defaults Light palette: cream paper #f4efe4 background, deep navy #1a2235 text, darkened accent #3a5fce for AA contrast. Resolution rule: data-theme="dark" → dark always data-theme="light" → light always no data-theme + prefers-color-scheme: light → light otherwise → dark Manual toggle persists in localStorage so OS-pref auto-switch stops auto-applying once the user has chosen. Known follow-ups: re-rendering mermaid on toggle (currently requires page reload); templates/docs-styles.html still has hardcoded colors (docs nav is hidden so lower priority); the projects-cube template also got light-mode fixes locally but is still WIP and stays local. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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
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
For summer / direct-sunlight visibility. Cream-paper aesthetic rather than a flat invert — the dark mode here is cool/blue, so cream gives strong visual differentiation and reads cleanly in glare.
Resolution order:
```
data-theme="dark" → dark always
data-theme="light" → light always
no data-theme + prefers-color-scheme: light → light
otherwise → dark
```
Manual toggle (sun/moon button in nav) persists choice via localStorage; OS auto-switch stops applying once a manual choice exists.
How it's wired
Light palette
Known follow-ups (not in this PR)
Test plan
🤖 Generated with Claude Code