Claude Fable 5
2c571f9f5e
The dark palette lives as a single :root[data-theme='dark'] block in tokens.css; theme.ts and the pre-paint public/theme-init.js (external file because the prod CSP forbids inline scripts) always resolve the stored ui.theme.mode to a concrete data-theme, so 'system' needs no @media duplicate and follows live OS changes via matchMedia. color-scheme flips per theme (native controls/scrollbars), paired theme-color metas track the effective theme, and the new Appearance settings section offers the three-way choice as native radios (device-local, like #170). Label chips gain a chip-outline ring so arbitrary user colors stay separated on the dark canvas; useEffectiveTheme() is exported for the later pond-scoped theming stage (ADR 0018). Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QRtCnB3uLdQtFmvp9HXcRX
27 lines
1.3 KiB
HTML
27 lines
1.3 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<!-- Applies at parse time, before any script or stylesheet: the UA
|
|
canvas is already dark for system-dark users, killing the white
|
|
flash. theme-init.js then narrows it to the resolved theme. -->
|
|
<meta name="color-scheme" content="light dark" />
|
|
<meta name="theme-color" media="(prefers-color-scheme: light)" content="#2f6f4f" />
|
|
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#10161d" />
|
|
<title>Dorfteich</title>
|
|
<!-- Classic (non-module) script: executes during head parsing, before
|
|
first paint and before the deferred module bundle. External file
|
|
because the prod CSP forbids inline scripts (issue #180). -->
|
|
<script src="/theme-init.js"></script>
|
|
<!-- Self-hosted catalog @font-face rules (ADR 0016), baked into the image
|
|
by deploy/fonts/build-fonts.mjs. Absent in a plain dev build → the app
|
|
falls back to system fonts; never references a third-party origin. -->
|
|
<link rel="stylesheet" href="/fonts/catalog.css" />
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
<script type="module" src="/src/main.tsx"></script>
|
|
</body>
|
|
</html>
|