Fix theme toggle

src/app.html

@@ -23,7 +23,7 @@
 				if (theme !== 'light' && theme !== 'dark') {
 					theme = window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
 				}
-				document.documentElement.style.colorScheme = theme;
+				document.documentElement.dataset.theme = theme;
 			})();
 		</script>
 		%sveltekit.head%

src/lib/theme.svelte.ts

@@ -16,15 +16,16 @@ const createTheme = () => {
 
 		/** Adopts whatever the bootstrap script in app.html resolved before paint. */
 		hydrate() {
-			current = document.documentElement.style.colorScheme === 'light' ? 'light' : 'dark';
+			current = document.documentElement.dataset.theme === 'light' ? 'light' : 'dark';
 		},
 
 		toggle() {
 			current = current === 'dark' ? 'light' : 'dark';
 
-			// Every colour in the stylesheet is a light-dark() pair, so setting the
-			// scheme on :root is the whole theme switch.
-			document.documentElement.style.colorScheme = current;
+			// Every colour in the stylesheet is a light-dark() pair resolved against
+			// the color-scheme layout.css binds to this attribute, so flipping it is
+			// the whole theme switch.
+			document.documentElement.dataset.theme = current;
 
 			try {
 				localStorage.setItem(THEME_KEY, current);

src/routes/layout.css

@@ -62,6 +62,14 @@
 	--sdp-line-height: 24px;
 }
 
+:root[data-theme='light'] {
+	color-scheme: light;
+}
+
+:root[data-theme='dark'] {
+	color-scheme: dark;
+}
+
 body {
 	background-color: var(--color-background);
 	color: var(--color-text);