fix tutorial dark mode (#158)

Rich-Harris · web-flow · commit c102fff78b72 · 2024-09-28T15:22:07.000-04:00
* fix tutorial dark mode

* missed a spot
diff --git a/apps/svelte.dev/content/tutorial/+assets/src/app.html b/apps/svelte.dev/content/tutorial/+assets/src/app.html
@@ -8,7 +8,7 @@
 		%sveltekit.head%
 
 		<style>
-			body {
+			html {
 				--bg-1: hsl(0, 0%, 100%);
 				--bg-2: hsl(206, 20%, 90%);
 				--bg-3: hsl(206, 20%, 80%);
@@ -18,6 +18,21 @@
 				--link: hsl(208, 77%, 47%);
 				--link-hover: hsl(208, 77%, 55%);
 				--link-active: hsl(208, 77%, 40%);
+
+				&.dark {
+					--bg-1: hsl(0, 0%, 18%);
+					--bg-2: hsl(0, 0%, 30%);
+					--bg-3: hsl(0, 0%, 40%);
+					--fg-1: hsl(0, 0%, 90%);
+					--fg-2: hsl(0, 0%, 70%);
+					--fg-3: hsl(0, 0%, 60%);
+					--link: hsl(206, 96%, 72%);
+					--link-hover: hsl(206, 96%, 78%);
+					--link-active: hsl(206, 96%, 64%);
+				}
+			}
+
+			body {
 				--border-radius: 4px;
 				--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
 					'Open Sans', 'Helvetica Neue', sans-serif;
@@ -243,18 +258,6 @@
 			ul.todos button:hover {
 				opacity: 1;
 			}
-
-			html.dark {
-				--bg-1: hsl(0, 0%, 18%);
-				--bg-2: hsl(0, 0%, 30%);
-				--bg-3: hsl(0, 0%, 40%);
-				--fg-1: hsl(0, 0%, 90%);
-				--fg-2: hsl(0, 0%, 70%);
-				--fg-3: hsl(0, 0%, 60%);
-				--link: hsl(206, 96%, 72%);
-				--link-hover: hsl(206, 96%, 78%);
-				--link-active: hsl(206, 96%, 64%);
-			}
 		</style>
 	</head>
 	<body>
@@ -263,8 +266,8 @@
 		<script>
 			const theme = new URL(window.location).searchParams.get('theme');
 
-			document.body.classList.remove('light', 'dark');
-			document.body.classList.add(theme || 'light');
+			document.documentElement.classList.remove('light', 'dark');
+			document.documentElement.classList.add(theme || 'light');
 		</script>
 	</body>
 </html>
diff --git a/apps/svelte.dev/scripts/create-tutorial-zip/common/src/app.html b/apps/svelte.dev/scripts/create-tutorial-zip/common/src/app.html
@@ -8,7 +8,7 @@
 		%sveltekit.head%
 
 		<style>
-			body {
+			html {
 				--bg-1: hsl(0, 0%, 100%);
 				--bg-2: hsl(206, 20%, 90%);
 				--bg-3: hsl(206, 20%, 80%);
@@ -18,6 +18,21 @@
 				--link: hsl(208, 77%, 47%);
 				--link-hover: hsl(208, 77%, 55%);
 				--link-active: hsl(208, 77%, 40%);
+
+				&.dark {
+					--bg-1: hsl(0, 0%, 18%);
+					--bg-2: hsl(0, 0%, 30%);
+					--bg-3: hsl(0, 0%, 40%);
+					--fg-1: hsl(0, 0%, 90%);
+					--fg-2: hsl(0, 0%, 70%);
+					--fg-3: hsl(0, 0%, 60%);
+					--link: hsl(206, 96%, 72%);
+					--link-hover: hsl(206, 96%, 78%);
+					--link-active: hsl(206, 96%, 64%);
+				}
+			}
+
+			body {
 				--border-radius: 4px;
 				--font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
 					'Open Sans', 'Helvetica Neue', sans-serif;
@@ -243,18 +258,6 @@
 			ul.todos button:hover {
 				opacity: 1;
 			}
-
-			html.dark {
-				--bg-1: hsl(0, 0%, 18%);
-				--bg-2: hsl(0, 0%, 30%);
-				--bg-3: hsl(0, 0%, 40%);
-				--fg-1: hsl(0, 0%, 90%);
-				--fg-2: hsl(0, 0%, 70%);
-				--fg-3: hsl(0, 0%, 60%);
-				--link: hsl(206, 96%, 72%);
-				--link-hover: hsl(206, 96%, 78%);
-				--link-active: hsl(206, 96%, 64%);
-			}
 		</style>
 	</head>
 	<body>
