sveltejs · dummdidumm · Dec 13, 2022 · Dec 7, 2022 · Dec 7, 2022 · Dec 7, 2022
diff --git a/content/tutorial/01-svelte/03-props/03-spread-props/app-a/src/lib/PackageInfo.svelte b/content/tutorial/01-svelte/03-props/03-spread-props/app-a/src/lib/PackageInfo.svelte
@@ -8,16 +8,15 @@
 </script>
 
 <p>
-	The <code>{name}</code> package is {speed} fast.
-	Download version {version} from
+	The <code>{name}</code> package is {speed} fast. Download version {version}
+	from
 	<a {href}>npm</a>
 	and <a href={website}>learn more here</a>
 </p>
 
 <style>
 	code {
 		font-family: Menlo;
-		background: #eee;
 		padding: 0.1em 0.2em;
 		border-radius: 0.2em;
 	}

diff --git a/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/app-a/src/lib/Thing.svelte b/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/app-a/src/lib/Thing.svelte
@@ -30,4 +30,10 @@
 		border-radius: 0.2em;
 		background-color: #ffdfd3;
 	}
+
+	@media (prefers-color-scheme: dark) {
+		span {
+			background-color: #4f352b;
+		}
+	}
 </style>
diff --git a/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/app-b/src/lib/Thing.svelte b/content/tutorial/01-svelte/04-logic/05-keyed-each-blocks/app-b/src/lib/Thing.svelte
@@ -29,4 +29,10 @@
 		border-radius: 0.2em;
 		background-color: #ffdfd3;
 	}
+
+	@media (prefers-color-scheme: dark) {
+		span {
+			background-color: #4f352b;
+		}
+	}
 </style>
diff --git a/content/tutorial/01-svelte/04-logic/06-await-blocks/app-a/src/lib/App.svelte b/content/tutorial/01-svelte/04-logic/06-await-blocks/app-a/src/lib/App.svelte
@@ -1,7 +1,7 @@
 <script>
 	async function getRandomNumber() {
 		const res = await fetch(
-			`tutorial/random-number`
+			`https://svelte.dev/tutorial/random-number`
 		);
 		const text = await res.text();
 
@@ -19,9 +19,7 @@
 	}
 </script>
 
-<button on:click={handleClick}>
-	generate random number
-</button>
+<button on:click={handleClick}> generate random number </button>
 
 <!-- replace this element -->
 <p>{promise}</p>
diff --git a/content/tutorial/01-svelte/04-logic/06-await-blocks/app-b/src/lib/App.svelte b/content/tutorial/01-svelte/04-logic/06-await-blocks/app-b/src/lib/App.svelte
@@ -1,7 +1,7 @@
 <script>
 	async function getRandomNumber() {
 		const res = await fetch(
-			`tutorial/random-number`
+			`https://svelte.dev/tutorial/random-number`
 		);
 		const text = await res.text();
 
@@ -19,9 +19,7 @@
 	}
 </script>
 
-<button on:click={handleClick}>
-	generate random number
-</button>
+<button on:click={handleClick}> generate random number </button>
 
 {#await promise}
 	<p>...waiting</p>

diff --git a/content/tutorial/02-sveltekit/06-errors-and-redirects/03-fallback-errors/README.md b/content/tutorial/02-sveltekit/06-errors-and-redirects/03-fallback-errors/README.md
@@ -22,6 +22,11 @@ You can customise the fallback error page. Create a `src/error.html` file:
 	<head>
 		<meta charset="utf-8" />
 		<title>%sveltekit.error.message%</title>
+		<style>
+			body {
+				color: #ff531a;
+			}
+		</style>
 	</head>
 	<body>
 		<h1>Game over</h1>

diff --git a/...ent/tutorial/02-sveltekit/06-errors-and-redirects/03-fallback-errors/app-b/src/error.html b/...ent/tutorial/02-sveltekit/06-errors-and-redirects/03-fallback-errors/app-b/src/error.html
@@ -3,6 +3,11 @@
 	<head>
 		<meta charset="utf-8" />
 		<title>%sveltekit.error.message%</title>
+		<style>
+			body {
+				color: #ff531a;
+			}
+		</style>
 	</head>
 	<body>
 		<h1>Game over</h1>

diff --git a/...tutorial/03-advanced-svelte/07-composition/04-optional-slots/app-a/src/lib/Project.svelte b/...tutorial/03-advanced-svelte/07-composition/04-optional-slots/app-a/src/lib/Project.svelte
@@ -53,12 +53,12 @@
 	}
 
 	p {
-		color: #777;
+		opacity: 0.9;
 		margin: 0;
 	}
 
 	.discussion {
-		background-color: #eee;
+		background-color: rgba(82, 81, 75, 0.1);
 		border-top: 1px #ccc solid;
 	}
 </style>
diff --git a/...tutorial/03-advanced-svelte/07-composition/04-optional-slots/app-b/src/lib/Project.svelte b/...tutorial/03-advanced-svelte/07-composition/04-optional-slots/app-b/src/lib/Project.svelte
@@ -55,12 +55,12 @@
 	}
 
 	p {
-		color: #777;
+		opacity: 0.9;
 		margin: 0;
 	}
 
 	.discussion {
-		background-color: #eee;
+		background-color: rgba(82, 81, 75, 0.1);
 		border-top: 1px #ccc solid;
 	}
 </style>
diff --git a/content/tutorial/03-advanced-svelte/07-composition/05-slot-props/app-a/src/lib/App.svelte b/content/tutorial/03-advanced-svelte/07-composition/05-slot-props/app-a/src/lib/App.svelte
@@ -16,7 +16,7 @@
 	div {
 		padding: 1em;
 		margin: 0 0 1em 0;
-		background-color: #eee;
+		border: 1px solid #ff3e00;
 	}
 
 	.active {

diff --git a/content/tutorial/03-advanced-svelte/07-composition/05-slot-props/app-b/src/lib/App.svelte b/content/tutorial/03-advanced-svelte/07-composition/05-slot-props/app-b/src/lib/App.svelte
@@ -36,7 +36,7 @@
 	div {
 		padding: 1em;
 		margin: 0 0 1em 0;
-		background-color: #eee;
+		border: 1px solid #ff3e00;
 	}
 
 	.active {

diff --git a/...-sveltekit/03-advanced-routing/05-breaking-out-of-layouts/app-a/src/routes/+layout.svelte b/...-sveltekit/03-advanced-routing/05-breaking-out-of-layouts/app-a/src/routes/+layout.svelte
@@ -23,7 +23,8 @@
 		content: attr(data-name) ' layout';
 		left: 1em;
 		top: -1em;
-		background-color: white;
+		background-color: #ff531a;
+		color: white;
 		padding: 0.5em;
 		line-height: 1;
 	}

diff --git a/...it/04-advanced-loading/02-using-both-load-functions/app-a/src/routes/CoolComponent.svelte b/...it/04-advanced-loading/02-using-both-load-functions/app-a/src/routes/CoolComponent.svelte
@@ -9,6 +9,6 @@
 <style>
 	marquee {
 		font-family: 'Comic Sans MS';
-		color: purple;
+		color: #e60073;
 	}
 </style>
diff --git a/.../04-advanced-sveltekit/05-environment-variables/04-env-dynamic-public/README.md b/.../04-advanced-sveltekit/05-environment-variables/04-env-dynamic-public/README.md
@@ -1,5 +1,5 @@
 ---
-title: $env/static/public
+title: $env/dynamic/public
 ---
 
 As with [private environment variables](/tutorial/env-static-private), it's preferable to use static values if possible, but if necessary we can use dynamic values instead:

diff --git a/content/tutorial/common/src/app.html b/content/tutorial/common/src/app.html
@@ -52,6 +52,26 @@
 			.error {
 				color: red;
 			}
+
+			code {
+				background: hsl(206, 20%, 80%);
+			}
+
+			@media (prefers-color-scheme: dark) {
+				body {
+					background: hsl(0, 0%, 18%);
+					color: hsl(0, 0%, 90%);
+				}
+				code {
+					background: hsl(0, 0%, 40%);
+				}
+				a {
+					color: hsl(204, 100%, 63%);
+				}
+				nav {
+					background-color: #1a0d01;
+				}
+			}
 		</style>
 	</head>
 	<body>

diff --git a/content/tutorial/common/static/svelte-logo-mask.svg b/content/tutorial/common/static/svelte-logo-mask.svg
diff --git a/content/tutorial/common/static/tutorial/dark-theme.css b/content/tutorial/common/static/tutorial/dark-theme.css
@@ -0,0 +1,5 @@
+body {
+	background-color: #333;
+	color: whitesmoke;
+	transition: all 0.5s;
+}
diff --git a/content/tutorial/common/static/tutorial/icons/folder-open.svg b/content/tutorial/common/static/tutorial/icons/folder-open.svg
diff --git a/content/tutorial/common/static/tutorial/icons/folder.svg b/content/tutorial/common/static/tutorial/icons/folder.svg
diff --git a/content/tutorial/common/static/tutorial/icons/gif.svg b/content/tutorial/common/static/tutorial/icons/gif.svg
diff --git a/content/tutorial/common/static/tutorial/icons/md.svg b/content/tutorial/common/static/tutorial/icons/md.svg
diff --git a/content/tutorial/common/static/tutorial/icons/xlsx.svg b/content/tutorial/common/static/tutorial/icons/xlsx.svg
diff --git a/package.json b/package.json
@@ -14,7 +14,7 @@
 		"@sveltejs/adapter-auto": "1.0.0-next.90",
 		"@sveltejs/adapter-vercel": "1.0.0-next.85",
 		"@sveltejs/kit": "next",
-		"@sveltejs/site-kit": "^2.1.2",
+		"@sveltejs/site-kit": "^3.0.2",
 		"@types/diff": "^5.0.2",
 		"@types/marked": "^4.0.8",
 		"@types/prismjs": "^1.26.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app.html b/src/app.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="theme-default typo-default">
+<html lang="en">
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />

diff --git a/src/lib/components/Modal.svelte b/src/lib/components/Modal.svelte
@@ -66,7 +66,8 @@
 		transform: translate(-50%, -50%);
 		width: calc(100vw - 2rem);
 		max-width: 56rem;
-		background: white;
+		background: var(--sk-back-2);
+		color: var(--sk-text-2);
 		padding: 2rem;
 		border: none;
 		border-radius: 0.5rem;

diff --git a/src/lib/components/PreloadingIndicator.svelte b/src/lib/components/PreloadingIndicator.svelte
diff --git a/src/lib/components/SplitPane.svelte b/src/lib/components/SplitPane.svelte
@@ -194,7 +194,7 @@
 		top: 0;
 		width: 100%;
 		height: 100%;
-		background: rgba(255, 255, 255, 0.01);
+		background: rgba(255, 255, 255, 0.0001);
 	}
 
 	.divider {

diff --git a/src/lib/components/filetree/ContextMenu.svelte b/src/lib/components/filetree/ContextMenu.svelte
@@ -64,7 +64,7 @@
 	}
 
 	button {
-		color: var(--text);
+		color: var(--sk-text-2);
 		width: 100%;
 		text-align: left;
 		border: 0px;