ignite/index.html at main · malinfossum/ignite · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!doctype html>
<html lang="en" data-palette="ignite">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content" />
		<meta name="theme-color" content="#0b0a0a" />
		<meta name="description" content="Ignite — a small flame, kept going." />
		<link rel="manifest" href="%BASE_URL%manifest.webmanifest" />
		<link rel="icon" href="%BASE_URL%icon.svg" type="image/svg+xml" />
		<link rel="apple-touch-icon" href="%BASE_URL%icons/apple-touch-icon-180.png" />
		<title>Ignite</title>
		<script>
			/* Inline and synchronous on purpose: an external script runs after the
			   stylesheets parse, which flashes the wrong theme on first paint. The
			   settings model in IndexedDB is the source of truth, but IndexedDB is
			   async and cannot be read this early — so the controller mirrors the
			   chosen theme into localStorage purely as this paint-time cache.
			   Mirrors resolveTheme() in src/utils/theme.js: anything that is not
			   an explicit "dark"/"light" — including "system", absent, or stale —
			   follows the OS. */
			(() => {
				const choice = localStorage.getItem("ignite:theme");
				document.documentElement.dataset.theme =
					choice === "dark" || choice === "light"
						? choice
						: window.matchMedia("(prefers-color-scheme: light)").matches
							? "light"
							: "dark";
			})();
		</script>
		<link rel="stylesheet" href="/main.css" />
	</head>
	<body>
		<header id="topbar"></header>
		<div id="sidebar" role="navigation"></div>
		<main id="main"></main>
		<div id="scrim"></div>
		<script type="module" src="/src/main.js"></script>
	</body>
</html>