Light mode fixes

sites/svelte.dev/src/routes/(authed)/repl/[id]/AppControls.svelte

@@ -243,8 +243,8 @@ export default app;`,
 		align-items: center;
 		justify-content: space-between;
 		padding: 0.6rem var(--side-nav);
-		background-color: var(--second);
-		color: white;
+		background-color: var(--sk-back-4);
+		color: var(--sk-text-1);
 		white-space: nowrap;
 		flex: 0;
 	}
@@ -256,9 +256,9 @@ export default app;`,
 		padding: 0.2em;
 		opacity: 0.7;
 		transition: opacity 0.3s;
-		font-family: var(--font);
+		font-family: var(--sk-font);
 		font-size: 1.6rem;
-		color: white;
+		color: var(--sk-text-1);
 		/* width: 1.6em;
 		height: 1.6em; */
 		line-height: 1;
@@ -280,7 +280,7 @@ export default app;`,
 		background: transparent;
 		border: none;
 		color: currentColor;
-		font-family: var(--font);
+		font-family: var(--sk-font);
 		font-size: 1.6rem;
 		opacity: 0.7;
 		outline: none;

sites/svelte.dev/src/routes/+layout.svelte

@@ -52,6 +52,10 @@
 </main>
 
 <style>
+	:global(:root) {
+		color-scheme: light dark;
+	}
+
 	@media (max-width: 830px) {
 		:global(aside) {
 			z-index: 9999 !important;
@@ -84,6 +88,11 @@
 		}
 	}
 
+	:global(html, body) {
+		height: 100%;
+		width: 100%;
+	}
+
 	:global(.examples-container, .repl-outer, .tutorial-outer) {
 		height: calc(100vh - var(--nav-h) - var(--ukr-footer-height)) !important;
 	}

sites/svelte.dev/src/routes/_components/Demo.svelte

@@ -17,12 +17,14 @@
 		{
 			id: 'reactive-assignments',
 			title: 'Reactivity',
-			description: 'Trigger efficient, granular updates by assigning to local variables. The compiler does the rest.',
+			description:
+				'Trigger efficient, granular updates by assigning to local variables. The compiler does the rest.',
 		},
 		{
 			id: 'svg-transitions',
 			title: 'Transitions',
-			description: 'Build beautiful UIs with a powerful, performant transition engine built right into the framework.',
+			description:
+				'Build beautiful UIs with a powerful, performant transition engine built right into the framework.',
 		},
 	];
 
@@ -102,8 +104,8 @@
 	}
 
 	button.selected {
-		background-color: white;
-		color: var(--sk-back-1);
+		background-color: var(--sk-back-1);
+		color: var(--sk-text-2);
 	}
 
 	.small-show {

sites/svelte.dev/src/routes/examples/[slug]/_TableOfContents.svelte

@@ -48,7 +48,7 @@
 		height: 100%;
 		border-right: 1px solid var(--sk-back-4);
 		background-color: var(--sk-back-4);
-		color: white;
+		color: var(--sk-text-2);
 		padding: 3rem 3rem 0 3rem;
 		margin: 0;
 	}

sites/svelte.dev/src/routes/tutorial/[slug]/+page.svelte

@@ -220,7 +220,7 @@
 		font-size: var(--sk-text-m);
 		line-height: 1;
 		font-weight: 400;
-		color: white;
+		color: var(--sk-text-2);
 	}
 
 	.chapter-markup :global(h2:first-child) {
@@ -234,7 +234,7 @@
 	}
 
 	.chapter-markup :global(a:hover) {
-		color: white;
+		color: var(--sk-text-1);
 	}
 
 	.chapter-markup :global(ul) {
@@ -258,7 +258,7 @@
 
 	.chapter-markup :global(p) > :global(code),
 	.chapter-markup :global(ul) :global(code) {
-		color: var(--sidebar-text);
+		color: var(--sk-code-base);
 		background: var(--sk-code-bg);
 		padding: 0.2em 0.4em 0.3em;
 		white-space: nowrap;
@@ -266,6 +266,15 @@
 		top: -0.1em;
 	}
 
+	.chapter-markup :global(:where(pre.language-markup)) {
+		background-color: var(--sk-code-bg);
+		color: var(--sk-code-base);
+		border-radius: 0.5rem;
+		padding: 1rem;
+		margin: 0 0 1rem;
+		font-size: 14px;
+	}
+
 	.controls {
 		border-top: 1px solid rgba(255, 255, 255, 0.15);
 		padding: 1em 0 0 0;
@@ -274,9 +283,9 @@
 	}
 
 	.show {
-		background: var(--prime);
+		background: var(--sk-theme-1);
 		padding: 0.3em 0.7em;
-		border-radius: var(--border-r);
+		border-radius: var(--sk-border-radius);
 		top: 0.1em;
 		position: relative;
 		font-size: var(--h5);
@@ -303,7 +312,7 @@
 	.improve-chapter a {
 		font-size: 14px;
 		text-decoration: none;
-		opacity: 0.3;
+		opacity: 0.6;
 		padding: 0 0.1em 0 1.2em;
 		background: no-repeat 0 50% url(/icons/edit.svg);
 		background-size: 1em 1em;

sites/svelte.dev/src/routes/tutorial/[slug]/_TableOfContents.svelte

@@ -67,8 +67,8 @@
 		position: relative;
 		padding: 1em 0.5em;
 		font-weight: 300;
-		font-size: var(--h6);
-		color: white;
+		font-size: var(--sk-text-xs);
+		color: var(--sk-text-2);
 	}
 
 	a {
@@ -76,7 +76,7 @@
 		padding: 0.7em 0;
 		text-align: center;
 		opacity: 0.75;
-		color: white;
+		color: var(--sk-text-2);
 	}
 
 	a:hover {