verdande/web/src/app.html

<!doctype html>
<html lang="da" data-theme="dark">
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
		<meta name="theme-color" content="#111312" />
		<meta name="description" content="verdande — opgaver og projekter, delt." />
		<link rel="manifest" href="/manifest.webmanifest" />
		<link rel="icon" href="/icon.svg" type="image/svg+xml" />
		<!-- Safari ignores the manifest's icons entirely and looks for this by name.
		     Without it an installed PWA on iOS gets a screenshot of the page as its
		     home-screen icon. Generated from the same SVG by scripts/generate-icons.js. -->
		<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
		<title>verdande</title>
		<script>
			// Applied before first paint, so a dark-theme user never sees a white
			// flash on load. Reading localStorage here is the only way to do that —
			// anything inside the app runs after the document has already painted.
			try {
				const stored = localStorage.getItem('verdande:theme');
				const theme =
					stored ??
					(window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
				document.documentElement.dataset.theme = theme;

				// The look changes the typeface and the spacing, so it has to be on
				// before first paint too — otherwise the page is laid out once in one
				// face and again in another, which is a visible jump.
				const look = localStorage.getItem('verdande:look');
				if (look && look !== 'verdande') document.documentElement.dataset.look = look;

				// The font-size choices change layout too, so they belong before first
				// paint for the same reason: otherwise the sidebar and the list are drawn
				// once at one size and again at another.
				const menuSize = localStorage.getItem('verdande:menu-size');
				if (menuSize && menuSize !== 'default') document.documentElement.dataset.menuSize = menuSize;
				const textSize = localStorage.getItem('verdande:text-size');
				if (textSize && textSize !== 'default') document.documentElement.dataset.textSize = textSize;
			} catch (e) {
				// Private browsing can refuse localStorage; the dark default stands.
			}
		</script>
		%sveltekit.head%
	</head>
	<body data-sveltekit-preload-data="hover">
		<div style="display: contents">%sveltekit.body%</div>
	</body>
</html>