diff --git a/apps/svelte.dev/content/tutorial/+assets/src/app.html b/apps/svelte.dev/content/tutorial/+assets/src/app.html
index 8052846e67..daeee83cae 100644
--- a/apps/svelte.dev/content/tutorial/+assets/src/app.html
+++ b/apps/svelte.dev/content/tutorial/+assets/src/app.html
@@ -244,7 +244,7 @@
 				opacity: 1;
 			}
 
-			body.dark {
+			html.dark {
 				--bg-1: hsl(0, 0%, 18%);
 				--bg-2: hsl(0, 0%, 30%);
 				--bg-3: hsl(0, 0%, 40%);
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
index 8052846e67..daeee83cae 100644
--- a/apps/svelte.dev/scripts/create-tutorial-zip/common/src/app.html
+++ b/apps/svelte.dev/scripts/create-tutorial-zip/common/src/app.html
@@ -244,7 +244,7 @@
 				opacity: 1;
 			}
 
-			body.dark {
+			html.dark {
 				--bg-1: hsl(0, 0%, 18%);
 				--bg-2: hsl(0, 0%, 30%);
 				--bg-3: hsl(0, 0%, 40%);
diff --git a/apps/svelte.dev/src/routes/_home/Deployment.svelte b/apps/svelte.dev/src/routes/_home/Deployment.svelte
index 6c9d9d4d62..440eb6c890 100644
--- a/apps/svelte.dev/src/routes/_home/Deployment.svelte
+++ b/apps/svelte.dev/src/routes/_home/Deployment.svelte
@@ -287,11 +287,11 @@
 		}
 	}
 
-	:global(body.dark) .platforms .invert img {
+	:global(html.dark) .platforms .invert img {
 		--invert: 1;
 	}
 
-	:global(body.dark) .platforms .invert-hover img {
+	:global(html.dark) .platforms .invert-hover img {
 		--invert-hover: 1;
 	}
 </style>
diff --git a/apps/svelte.dev/src/routes/_home/Hero.svelte b/apps/svelte.dev/src/routes/_home/Hero.svelte
index 156a5af397..32dad6aeb1 100644
--- a/apps/svelte.dev/src/routes/_home/Hero.svelte
+++ b/apps/svelte.dev/src/routes/_home/Hero.svelte
@@ -164,7 +164,7 @@
 		}
 	}
 
-	:global(body.dark) .hero {
+	:global(html.dark) .hero {
 		background: radial-gradient(
 				64.14% 72.25% at 47.58% 31.75%,
 				hsl(209deg 6% 47% / 52%) 0%,
@@ -179,7 +179,7 @@
 			linear-gradient(0deg, hsl(204, 38%, 20%), hsl(204, 10%, 90%));
 	}
 
-	:global(body.dark) .logotype {
+	:global(html.dark) .logotype {
 		filter: invert(4) brightness(1.2);
 	}
 </style>
diff --git a/apps/svelte.dev/src/routes/_home/HeroSvelteKit.svelte b/apps/svelte.dev/src/routes/_home/HeroSvelteKit.svelte
index 5f66d8daec..221fb1b941 100644
--- a/apps/svelte.dev/src/routes/_home/HeroSvelteKit.svelte
+++ b/apps/svelte.dev/src/routes/_home/HeroSvelteKit.svelte
@@ -142,21 +142,21 @@
 			mix-blend-mode: screen;
 		}
 
-		:global(body.light) .hero {
+		:global(html.light) .hero {
 			background: var(--gradient);
 		}
 
-		:global(body.light) .hero-text :global(svg) {
+		:global(html.light) .hero-text :global(svg) {
 			mix-blend-mode: initial;
 		}
 	}
 
-	:global(body.dark) .hero {
+	:global(html.dark) .hero {
 		background: hsl(210, 7%, 20%);
 		background: var(--dark-gradient);
 	}
 
-	:global(body.dark) .hero-text :global(svg) {
+	:global(html.dark) .hero-text :global(svg) {
 		mix-blend-mode: screen;
 	}
 </style>
diff --git a/apps/svelte.dev/src/routes/_home/WhosUsingSvelte/index.svelte b/apps/svelte.dev/src/routes/_home/WhosUsingSvelte/index.svelte
index c2886cdd20..ae56260fe9 100644
--- a/apps/svelte.dev/src/routes/_home/WhosUsingSvelte/index.svelte
+++ b/apps/svelte.dev/src/routes/_home/WhosUsingSvelte/index.svelte
@@ -95,7 +95,7 @@
 		}
 	}
 
-	:global(body.dark) .logos a {
+	:global(html.dark) .logos a {
 		--invert: 1;
 		filter: grayscale(1) contrast(4) opacity(0.7) invert(var(--invert, 0));
 	}
diff --git a/apps/svelte.dev/src/routes/_home/common.css b/apps/svelte.dev/src/routes/_home/common.css
index a059dd3df6..80d47c279d 100644
--- a/apps/svelte.dev/src/routes/_home/common.css
+++ b/apps/svelte.dev/src/routes/_home/common.css
@@ -41,13 +41,13 @@
 		--background-2: #444;
 	}
 
-	body.light .home {
+	html.light .home {
 		--background-1: radial-gradient(circle at top right, rgb(230, 233, 236), rgb(244, 245, 247));
 		--background-2: var(--sk-theme-2);
 	}
 }
 
-body.dark .home {
+html.dark .home {
 	/* --background-1: radial-gradient(circle at top right, rgb(49, 49, 49), rgb(77, 77, 77)); */
 	--background-1: #222;
 	--background-2: #444;
diff --git a/apps/svelte.dev/src/routes/_home/svelte-kit-logotype.svg.svelte b/apps/svelte.dev/src/routes/_home/svelte-kit-logotype.svg.svelte
index 759357aaa3..8880238ef0 100644
--- a/apps/svelte.dev/src/routes/_home/svelte-kit-logotype.svg.svelte
+++ b/apps/svelte.dev/src/routes/_home/svelte-kit-logotype.svg.svelte
@@ -27,20 +27,20 @@
 			fill: #8d8d93;
 		}
 
-		:global(body.light) .svelte {
+		:global(html.light) .svelte {
 			fill: hsl(0, 0%, 27%);
 		}
 
-		:global(body.light) .kit {
+		:global(html.light) .kit {
 			fill: #8d8d93;
 		}
 	}
 
-	:global(body.dark) .svelte {
+	:global(html.dark) .svelte {
 		fill: hsl(0, 0%, 80%);
 	}
 
-	:global(body.dark) .kit {
+	:global(html.dark) .kit {
 		fill: #8d8d93;
 	}
 </style>
diff --git a/apps/svelte.dev/src/routes/tutorial/[slug]/Sidebar.svelte b/apps/svelte.dev/src/routes/tutorial/[slug]/Sidebar.svelte
index 5be2aa1f08..8c0901427f 100644
--- a/apps/svelte.dev/src/routes/tutorial/[slug]/Sidebar.svelte
+++ b/apps/svelte.dev/src/routes/tutorial/[slug]/Sidebar.svelte
@@ -143,7 +143,7 @@
 		--color: rgba(255, 0, 0, 0.1);
 	}
 
-	:global(body.dark) .text :global(pre) :global(.highlight.remove) {
+	:global(html.dark) .text :global(pre) :global(.highlight.remove) {
 		--color: rgba(255, 0, 0, 0.27);
 	}
 
diff --git a/packages/repl/src/lib/Output/srcdoc/index.html b/packages/repl/src/lib/Output/srcdoc/index.html
index 21f049cbcc..b85c334ec3 100644
--- a/packages/repl/src/lib/Output/srcdoc/index.html
+++ b/packages/repl/src/lib/Output/srcdoc/index.html
@@ -51,7 +51,7 @@
 				padding: 0;
 			}
 
-			body.dark {
+			html.dark {
 				color-scheme: dark;
 				--bg-1: hsl(0, 0%, 18%);
 				--bg-2: hsl(0, 0%, 30%);
diff --git a/packages/site-kit/src/lib/home/TrySection.svelte b/packages/site-kit/src/lib/home/TrySection.svelte
index 50aa50c806..2589265659 100644
--- a/packages/site-kit/src/lib/home/TrySection.svelte
+++ b/packages/site-kit/src/lib/home/TrySection.svelte
@@ -35,7 +35,7 @@
 		--background-2: var(--sk-back-4);
 	}
 
-	:global(body.dark .try-container) {
+	:global(html.dark .try-container) {
 		--background-2: #444;
 	}
 
@@ -44,7 +44,7 @@
 			--background-2: #444;
 		}
 
-		:global(body.light .try-container) {
+		:global(html.light .try-container) {
 			--background-2: var(--sk-back-4) !important;
 		}
 	}
diff --git a/packages/site-kit/src/lib/styles/code.css b/packages/site-kit/src/lib/styles/code.css
index d9095bc8bf..8a06dc5289 100644
--- a/packages/site-kit/src/lib/styles/code.css
+++ b/packages/site-kit/src/lib/styles/code.css
@@ -1,8 +1,8 @@
 @import './base.css';
 
 body,
-body.light,
-body.dark {
+html.light,
+html.dark {
 	--shiki-color-text: var(--sk-code-base);
 	--shiki-color-background: hsl(var(--sk-back-3-hsl));
 	--shiki-token-constant: var(--sk-code-base);