Circuit-Forge/peregrine
3
0
Fork 0
Code Issues 17 Pull requests Projects Releases 7 Packages Wiki Activity Actions

fix: dark/explicit themes now show correct page background
Some checks failed
CI / Backend (Python) (push) Failing after 1m14s
Details
CI / Frontend (Vue) (push) Failing after 19s
Details
Mirror / mirror (push) Failing after 7s
Details
Release / release (push) Failing after 4s
Details

Browse source 
index.html set 'html, body { background: #eaeff8 }' hardcoded.
body paints on top of html — even with html correctly going dark
via CSS variable resolution, the hardcoded body background covered it.

Fix:
- Remove body background from inline style (body is now transparent)
- Add blocking script to read cf-theme/cf-hacker-mode from localStorage
  and set data-theme on <html> before first paint (FOUT prevention)
- Add html[data-theme='dark'|'solarized-dark'|'hacker'] rules so the
  correct background fires immediately on initial load for all themes
This commit is contained in:
pyr0ball 2026-05-08 15:44:33 -07:00
parent 293f0aba53
commit 73132222a2
2 changed files with 27 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
CHANGELOG.md
View file

@ -9,6 +9,22 @@ Format follows [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
--- ---
## [0.9.5] — 2026-05-08
### Fixed
- **Theme: dark/explicit themes show correct page background** — `index.html` inline style
set `html, body { background: #eaeff8 }` hardcoded. `body` paints on top of `html`, so
even when `html { background: var(--color-surface) }` correctly resolved to `#16202e` in
dark mode, the body's hardcoded light background covered it — producing dark cards on a
light page. Fixed by: (1) removing body background from the inline style; (2) adding a
tiny blocking `<script>` that reads `cf-theme` / `cf-hacker-mode` from localStorage and
sets `data-theme` on `<html>` before first paint; (3) adding
`html[data-theme="dark"|"solarized-dark"|"hacker"]` rules so FOUT prevention fires the
right background immediately on load.
---
## [0.9.4] — 2026-05-08 ## [0.9.4] — 2026-05-08
### Added ### Added

15
web/index.html
View file

@ -5,11 +5,18 @@
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Peregrine — Job Search Assistant</title> <title>Peregrine — Job Search Assistant</title>
<!-- Inline background prevents blank flash before CSS bundle loads --> <!-- Apply stored theme before first paint — prevents FOUT flash on dark/hacker themes.
<!-- Matches --color-surface light / dark from theme.css --> Mirrors the logic in useTheme.initTheme(). Must run before the <style> below. -->
<script>try{if(localStorage.getItem('cf-hacker-mode')==='true'){document.documentElement.dataset.theme='hacker';}else{var t=localStorage.getItem('cf-theme');if(t&&t!=='auto')document.documentElement.dataset.theme=t;}}catch(e){}</script>
<!-- FOUT prevention: background only on html (body is transparent).
Covers auto mode (media query) and all explicit theme choices. -->
<style> <style>
html, body { margin: 0; background: #eaeff8; min-height: 100vh; } html, body { margin: 0; min-height: 100vh; }
@media (prefers-color-scheme: dark) { html, body { background: #16202e; } } html { background: #eaeff8; }
@media (prefers-color-scheme: dark) { html:not([data-theme]) { background: #16202e; } }
html[data-theme="dark"] { background: #16202e; }
html[data-theme="solarized-dark"] { background: #002b36; }
html[data-theme="hacker"] { background: #0a0c0a; }
</style> </style>
<!-- Plausible analytics: cookie-free, GDPR-compliant, self-hosted. <!-- Plausible analytics: cookie-free, GDPR-compliant, self-hosted.
Skips localhost/127.0.0.1. Reports to hostname + circuitforge.tech rollup. --> Skips localhost/127.0.0.1. Reports to hostname + circuitforge.tech rollup. -->