From 34bb01a34b844d4ab3cb108e9a42b4c3e5918c4e Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sun, 16 Aug 2026 17:11:50 +0300
Subject: [PATCH] Fix theme inject warning

---
 apps/web/src/app.html                         | 16 ++++++++++++
 .../src/lib/features/theme/ThemeHead.svelte   | 25 ++-----------------
 2 files changed, 18 insertions(+), 23 deletions(-)

diff --git a/apps/web/src/app.html b/apps/web/src/app.html
index 0121188ca..1a5717bd8 100644
--- a/apps/web/src/app.html
+++ b/apps/web/src/app.html
@@ -14,6 +14,22 @@
 		<meta name="mobile-web-app-capable" content="yes" />
 		<meta name="theme-color" content="#010115" />
 		%sveltekit.head%
+		<script>
+			(() => {
+				const cl = document.documentElement.classList;
+				if (cl.contains("light") || cl.contains("dark")) return;
+
+				const theme = window.matchMedia("(prefers-color-scheme: light)").matches
+					? "light"
+					: "dark";
+				cl.add(theme);
+
+				const meta = document.querySelector("meta[name=color-scheme]");
+				if (meta) {
+					meta.content = theme === "dark" ? "dark light" : "light dark";
+				}
+			})();
+		</script>
 	</head>
 	<body>
 		%sveltekit.body%
diff --git a/apps/web/src/lib/features/theme/ThemeHead.svelte b/apps/web/src/lib/features/theme/ThemeHead.svelte
index a3aff0106..addc05c13 100644
--- a/apps/web/src/lib/features/theme/ThemeHead.svelte
+++ b/apps/web/src/lib/features/theme/ThemeHead.svelte
@@ -8,34 +8,13 @@ interface Props {
 
 let { theme }: Props = $props();
 
+// when following the system theme the blocking script in app.html corrects
+// this before first paint
 const metaColorScheme = $derived(
 	theme === "light" ? "light dark" : "dark light",
 );
-
-// applied before first paint when no explicit theme is set, so the page
-// never flashes the wrong theme; the html class is otherwise SSR'd
-const CLIENT_THEME_SCRIPT = `
-;(() => {
-  const theme = window.matchMedia("(prefers-color-scheme: light)").matches
-    ? 'light'
-    : 'dark';
-  const cl = document.documentElement.classList;
-  const themeAlreadyApplied = cl.contains('light') || cl.contains('dark');
-  if (!themeAlreadyApplied) {
-    cl.add(theme);
-  }
-  const meta = document.querySelector('meta[name=color-scheme]');
-  if (meta) {
-    meta.content = theme === 'dark' ? 'dark light' : 'light dark';
-  }
-})();
-`;
 </script>
 
 <svelte:head>
 	<meta name="color-scheme" content={metaColorScheme} />
-	{#if theme === null}
-		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
-		{@html `<script>${CLIENT_THEME_SCRIPT}</script>`}
-	{/if}
 </svelte:head>