src/app.html

<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width">
		<link rel="icon" href="%sveltekit.assets%/favicon.png">
		<meta name="color-scheme" content="dark light">
		<meta name="theme-color" media="(prefers-color-scheme: light)" content="#fff">
		<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#2e2e2e">
		<meta
			name="description"
			content="Learn Svelte and SvelteKit with an interactive browser-based tutorial"
		>
		<link rel="manifest" href="/manifest.json">
		%sveltekit.head%
	</head>
	<body data-sveltekit-preload-data="hover">
		<script>
			const themeValue = JSON.parse(localStorage.getItem('svelte:theme'))?.current;
			const systemPreferredTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
				? 'dark'
				: 'light';

			document.body.classList.remove('light', 'dark');
			document.body.classList.add(themeValue ?? systemPreferredTheme);
		</script>

		<div>%sveltekit.body%</div>
	</body>
</html>