Skip to content

feat: add warm-cream light mode with system + manual toggle#37

Merged
avrabe merged 1 commit into
mainfrom
feat/light-mode
Apr 26, 2026
Merged

feat: add warm-cream light mode with system + manual toggle#37
avrabe merged 1 commit into
mainfrom
feat/light-mode

Conversation

@avrabe
Copy link
Copy Markdown
Contributor

@avrabe avrabe commented Apr 26, 2026

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

  • CSS custom properties as the source of truth. 18 theme tokens (`--bg`, `--surface`, `--text`, `--accent`, etc.) on `:root`, with `:root[data-theme="light"]` and `@media (prefers-color-scheme: light)` overrides. Sass variables (`$bg`, `$text`, ...) now alias into these, so all existing partials keep compiling without per-file changes.
  • One `lighten()` call had to be replaced with a dedicated `$accent-hover` token (Sass color functions can't operate on `var()`).
  • Inline bootstrapper in `` applies the saved preference before render to avoid flash-of-wrong-theme.
  • Mermaid mirrors the palette in JS — light variant uses `theme: 'default'` (not `'base'`, which left derived colors falling back to dark and produced black-blob nodes).

Light palette

  • bg `#f4efe4` (cream paper) → faint dot-grid `rgba(68,81,106,0.10)` replaces the animated canvas
  • text `#1a2235` (deep navy)
  • accent `#3a5fce` (darkened from `#6c8cff` for AA on cream)
  • glass cards become opaque cream surfaces (translucency reads poorly on light)

Known follow-ups (not in this PR)

  • Mermaid diagrams require a page reload to re-render after toggle (the rendered SVG has lost the original source). Live re-render is doable but more code than the use-case demands.
  • `templates/docs-styles.html` still has hardcoded colors. Docs nav is hidden so low priority.
  • `templates/projects.html` (cube revamp) and `content/projects/_index.md` are WIP and stay local. The cube template already got light-mode fixes locally so it's ready when the projects revamp ships.

Test plan

  • zola build clean (23 pages)
  • Locally tested in light mode: landing, blog post with mermaid, status issue style references, projects cube (local-only)
  • User-confirmed visually
  • CI passes
  • After merge: deploy succeeds, light mode visible at https://pulseengine.eu via toggle button or by setting `prefers-color-scheme: light` in the browser

🤖 Generated with Claude Code

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>
@avrabe avrabe merged commit ea0ce9b into main Apr 26, 2026
1 check passed
@avrabe avrabe deleted the feat/light-mode branch April 26, 2026 08:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant