From ce2cde664199492f990d3172617c3573c10be60b Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 9 Oct 2024 10:37:48 -0400
Subject: [PATCH 1/5] fix theme toggle button opacity

---
 apps/svelte.dev/src/lib/icons/theme-dark.svg            | 2 +-
 apps/svelte.dev/src/lib/icons/theme-light.svg           | 2 +-
 packages/site-kit/src/lib/components/ThemeToggle.svelte | 1 -
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/apps/svelte.dev/src/lib/icons/theme-dark.svg b/apps/svelte.dev/src/lib/icons/theme-dark.svg
index 5063700ede..919499d388 100644
--- a/apps/svelte.dev/src/lib/icons/theme-dark.svg
+++ b/apps/svelte.dev/src/lib/icons/theme-dark.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#fff" d="M12 21q-3.775 0-6.388-2.613T3 12q0-3.45 2.25-5.988T11 3.05q.625-.075.975.45t-.025 1.1q-.425.65-.638 1.375T11.1 7.5q0 2.25 1.575 3.825T16.5 12.9q.775 0 1.538-.225t1.362-.625q.525-.35 1.075-.037t.475.987q-.35 3.45-2.937 5.725T12 21Zm0-2q2.2 0 3.95-1.213t2.55-3.162q-.5.125-1 .2t-1 .075q-3.075 0-5.238-2.163T9.1 7.5q0-.5.075-1t.2-1q-1.95.8-3.163 2.55T5 12q0 2.9 2.05 4.95T12 19Zm-.25-6.75Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#d4d4d4" d="M12 21q-3.775 0-6.388-2.613T3 12q0-3.45 2.25-5.988T11 3.05q.625-.075.975.45t-.025 1.1q-.425.65-.638 1.375T11.1 7.5q0 2.25 1.575 3.825T16.5 12.9q.775 0 1.538-.225t1.362-.625q.525-.35 1.075-.037t.475.987q-.35 3.45-2.937 5.725T12 21Zm0-2q2.2 0 3.95-1.213t2.55-3.162q-.5.125-1 .2t-1 .075q-3.075 0-5.238-2.163T9.1 7.5q0-.5.075-1t.2-1q-1.95.8-3.163 2.55T5 12q0 2.9 2.05 4.95T12 19Zm-.25-6.75Z"/></svg>
diff --git a/apps/svelte.dev/src/lib/icons/theme-light.svg b/apps/svelte.dev/src/lib/icons/theme-light.svg
index b860398b56..76c4c2e2b0 100644
--- a/apps/svelte.dev/src/lib/icons/theme-light.svg
+++ b/apps/svelte.dev/src/lib/icons/theme-light.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M0 0h24v24H0z"/><path fill="#000" d="M12 19a1 1 0 0 1 .993.883L13 20v1a1 1 0 0 1-1.993.117L11 21v-1a1 1 0 0 1 1-1zm6.313-2.09l.094.083l.7.7a1 1 0 0 1-1.32 1.497l-.094-.083l-.7-.7a1 1 0 0 1 1.218-1.567l.102.07zm-11.306.083a1 1 0 0 1 .083 1.32l-.083.094l-.7.7a1 1 0 0 1-1.497-1.32l.083-.094l.7-.7a1 1 0 0 1 1.414 0zM4 11a1 1 0 0 1 .117 1.993L4 13H3a1 1 0 0 1-.117-1.993L3 11h1zm17 0a1 1 0 0 1 .117 1.993L21 13h-1a1 1 0 0 1-.117-1.993L20 11h1zM6.213 4.81l.094.083l.7.7a1 1 0 0 1-1.32 1.497l-.094-.083l-.7-.7A1 1 0 0 1 6.11 4.74l.102.07zm12.894.083a1 1 0 0 1 .083 1.32l-.083.094l-.7.7a1 1 0 0 1-1.497-1.32l.083-.094l.7-.7a1 1 0 0 1 1.414 0zM12 2a1 1 0 0 1 .993.883L13 3v1a1 1 0 0 1-1.993.117L11 4V3a1 1 0 0 1 1-1zm0 5a5 5 0 1 1-4.995 5.217L7 12l.005-.217A5 5 0 0 1 12 7z"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M0 0h24v24H0z"/><path fill="#666" d="M12 19a1 1 0 0 1 .993.883L13 20v1a1 1 0 0 1-1.993.117L11 21v-1a1 1 0 0 1 1-1zm6.313-2.09l.094.083l.7.7a1 1 0 0 1-1.32 1.497l-.094-.083l-.7-.7a1 1 0 0 1 1.218-1.567l.102.07zm-11.306.083a1 1 0 0 1 .083 1.32l-.083.094l-.7.7a1 1 0 0 1-1.497-1.32l.083-.094l.7-.7a1 1 0 0 1 1.414 0zM4 11a1 1 0 0 1 .117 1.993L4 13H3a1 1 0 0 1-.117-1.993L3 11h1zm17 0a1 1 0 0 1 .117 1.993L21 13h-1a1 1 0 0 1-.117-1.993L20 11h1zM6.213 4.81l.094.083l.7.7a1 1 0 0 1-1.32 1.497l-.094-.083l-.7-.7A1 1 0 0 1 6.11 4.74l.102.07zm12.894.083a1 1 0 0 1 .083 1.32l-.083.094l-.7.7a1 1 0 0 1-1.497-1.32l.083-.094l.7-.7a1 1 0 0 1 1.414 0zM12 2a1 1 0 0 1 .993.883L13 3v1a1 1 0 0 1-1.993.117L11 4V3a1 1 0 0 1 1-1zm0 5a5 5 0 1 1-4.995 5.217L7 12l.005-.217A5 5 0 0 1 12 7z"/></g></svg>
diff --git a/packages/site-kit/src/lib/components/ThemeToggle.svelte b/packages/site-kit/src/lib/components/ThemeToggle.svelte
index d32f90d51b..2f7afb1e08 100644
--- a/packages/site-kit/src/lib/components/ThemeToggle.svelte
+++ b/packages/site-kit/src/lib/components/ThemeToggle.svelte
@@ -55,7 +55,6 @@
 		aspect-ratio: 1;
 		background: red;
 		background: url($lib/icons/theme-light.svg) no-repeat 50% 50% / 2.3rem 2.3rem;
-		opacity: 0.6;
 
 		:global(.dark) & {
 			background-image: url($lib/icons/theme-dark.svg);

From 38fd4bc9d46476fdf3841c658856760a3fe5c66b Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 9 Oct 2024 10:40:04 -0400
Subject: [PATCH 2/5] optimise

---
 apps/svelte.dev/src/lib/icons/theme-light.svg | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/svelte.dev/src/lib/icons/theme-light.svg b/apps/svelte.dev/src/lib/icons/theme-light.svg
index 76c4c2e2b0..0f2b9b9621 100644
--- a/apps/svelte.dev/src/lib/icons/theme-light.svg
+++ b/apps/svelte.dev/src/lib/icons/theme-light.svg
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><g fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M0 0h24v24H0z"/><path fill="#666" d="M12 19a1 1 0 0 1 .993.883L13 20v1a1 1 0 0 1-1.993.117L11 21v-1a1 1 0 0 1 1-1zm6.313-2.09l.094.083l.7.7a1 1 0 0 1-1.32 1.497l-.094-.083l-.7-.7a1 1 0 0 1 1.218-1.567l.102.07zm-11.306.083a1 1 0 0 1 .083 1.32l-.083.094l-.7.7a1 1 0 0 1-1.497-1.32l.083-.094l.7-.7a1 1 0 0 1 1.414 0zM4 11a1 1 0 0 1 .117 1.993L4 13H3a1 1 0 0 1-.117-1.993L3 11h1zm17 0a1 1 0 0 1 .117 1.993L21 13h-1a1 1 0 0 1-.117-1.993L20 11h1zM6.213 4.81l.094.083l.7.7a1 1 0 0 1-1.32 1.497l-.094-.083l-.7-.7A1 1 0 0 1 6.11 4.74l.102.07zm12.894.083a1 1 0 0 1 .083 1.32l-.083.094l-.7.7a1 1 0 0 1-1.497-1.32l.083-.094l.7-.7a1 1 0 0 1 1.414 0zM12 2a1 1 0 0 1 .993.883L13 3v1a1 1 0 0 1-1.993.117L11 4V3a1 1 0 0 1 1-1zm0 5a5 5 0 1 1-4.995 5.217L7 12l.005-.217A5 5 0 0 1 12 7z"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="#666" d="M12 19a1 1 0 0 1 .993.883L13 20v1a1 1 0 0 1-1.993.117L11 21v-1a1 1 0 0 1 1-1zm6.313-2.09.094.083.7.7a1 1 0 0 1-1.32 1.497l-.094-.083-.7-.7a1 1 0 0 1 1.218-1.567l.102.07zm-11.306.083a1 1 0 0 1 .083 1.32l-.083.094-.7.7a1 1 0 0 1-1.497-1.32l.083-.094.7-.7a1 1 0 0 1 1.414 0zM4 11a1 1 0 0 1 .117 1.993L4 13H3a1 1 0 0 1-.117-1.993L3 11h1zm17 0a1 1 0 0 1 .117 1.993L21 13h-1a1 1 0 0 1-.117-1.993L20 11h1zM6.213 4.81l.094.083.7.7a1 1 0 0 1-1.32 1.497l-.094-.083-.7-.7A1 1 0 0 1 6.11 4.74l.102.07zm12.894.083a1 1 0 0 1 .083 1.32l-.083.094-.7.7a1 1 0 0 1-1.497-1.32l.083-.094.7-.7a1 1 0 0 1 1.414 0zM12 2a1 1 0 0 1 .993.883L13 3v1a1 1 0 0 1-1.993.117L11 4V3a1 1 0 0 1 1-1zm0 5a5 5 0 1 1-4.995 5.217L7 12l.005-.217A5 5 0 0 1 12 7z"/></svg>

From 6855de00b0e45954cb3564791967d6f26a5df0ca Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 9 Oct 2024 10:48:01 -0400
Subject: [PATCH 3/5] fix/simplify

---
 .../src/lib/components/ThemeToggle.svelte     | 45 ++++---------------
 packages/site-kit/src/lib/nav/Nav.svelte      |  5 +--
 2 files changed, 9 insertions(+), 41 deletions(-)

diff --git a/packages/site-kit/src/lib/components/ThemeToggle.svelte b/packages/site-kit/src/lib/components/ThemeToggle.svelte
index 2f7afb1e08..714d69a084 100644
--- a/packages/site-kit/src/lib/components/ThemeToggle.svelte
+++ b/packages/site-kit/src/lib/components/ThemeToggle.svelte
@@ -38,16 +38,13 @@
 	onDestroy(() => query?.removeEventListener('change', cb));
 </script>
 
-<div class="appearance">
-	<span class="caption">Theme</span>
-	<button
-		onclick={toggle}
-		class="raised"
-		type="button"
-		aria-pressed={$theme.current === 'dark' ? 'true' : 'false'}
-		aria-label={label}
-	></button>
-</div>
+<button
+	onclick={toggle}
+	class="raised"
+	type="button"
+	aria-pressed={$theme.current === 'dark' ? 'true' : 'false'}
+	aria-label={label}
+></button>
 
 <style>
 	button {
@@ -55,37 +52,11 @@
 		aspect-ratio: 1;
 		background: red;
 		background: url($lib/icons/theme-light.svg) no-repeat 50% 50% / 2.3rem 2.3rem;
+		margin-left: 1rem;
 
 		:global(.dark) & {
 			background-image: url($lib/icons/theme-dark.svg);
 			opacity: 0.8;
 		}
 	}
-
-	.appearance {
-		display: flex;
-		align-items: center;
-
-		.caption {
-			display: none;
-			font-size: var(--sk-text-xs);
-			line-height: 1;
-			margin-right: 0rem;
-		}
-	}
-
-	@media (max-width: 799px) {
-		.appearance {
-			position: relative;
-			display: flex;
-			padding: 1.5rem 0;
-			justify-content: space-between;
-		}
-
-		.appearance .caption {
-			display: block;
-
-			font-size: var(--sk-text-s);
-		}
-	}
 </style>
diff --git a/packages/site-kit/src/lib/nav/Nav.svelte b/packages/site-kit/src/lib/nav/Nav.svelte
index 774c52e75c..0e4887e549 100644
--- a/packages/site-kit/src/lib/nav/Nav.svelte
+++ b/packages/site-kit/src/lib/nav/Nav.svelte
@@ -100,10 +100,7 @@ Top navigation bar for the application. It provides a slot for the left side, th
 
 			{@render external_links?.()}
 
-			<div class="appearance">
-				<span class="caption">Theme</span>
-				<ThemeToggle />
-			</div>
+			<ThemeToggle />
 		</div>
 	</div>
 

From aa30249284783355f9c71f6d792ffc4c2512a227 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 9 Oct 2024 10:48:14 -0400
Subject: [PATCH 4/5] fix/simplify

---
 packages/site-kit/src/lib/components/ThemeToggle.svelte | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/site-kit/src/lib/components/ThemeToggle.svelte b/packages/site-kit/src/lib/components/ThemeToggle.svelte
index 714d69a084..ef944572d6 100644
--- a/packages/site-kit/src/lib/components/ThemeToggle.svelte
+++ b/packages/site-kit/src/lib/components/ThemeToggle.svelte
@@ -2,8 +2,6 @@
 	import { theme } from '../stores';
 	import { onDestroy } from 'svelte';
 
-	let { label = 'Dark mode' }: { label?: string } = $props();
-
 	function toggle() {
 		const upcoming_theme = $theme.current === 'light' ? 'dark' : 'light';
 
@@ -42,8 +40,8 @@
 	onclick={toggle}
 	class="raised"
 	type="button"
-	aria-pressed={$theme.current === 'dark' ? 'true' : 'false'}
-	aria-label={label}
+	aria-pressed={$theme.current === 'dark'}
+	aria-label="Toggle dark mode"
 ></button>
 
 <style>

From c1b3aec6e3b3fa2e661ac424a501a130812d0505 Mon Sep 17 00:00:00 2001
From: Rich Harris <rich.harris@vercel.com>
Date: Wed, 9 Oct 2024 10:55:47 -0400
Subject: [PATCH 5/5] fix/simplify

---
 .../src/lib/components/ThemeToggle.svelte     | 35 ++++++-------------
 1 file changed, 10 insertions(+), 25 deletions(-)

diff --git a/packages/site-kit/src/lib/components/ThemeToggle.svelte b/packages/site-kit/src/lib/components/ThemeToggle.svelte
index ef944572d6..6fca2e9c4a 100644
--- a/packages/site-kit/src/lib/components/ThemeToggle.svelte
+++ b/packages/site-kit/src/lib/components/ThemeToggle.svelte
@@ -1,39 +1,24 @@
 <script lang="ts">
+	import { on } from 'svelte/events';
 	import { theme } from '../stores';
-	import { onDestroy } from 'svelte';
 
 	function toggle() {
-		const upcoming_theme = $theme.current === 'light' ? 'dark' : 'light';
+		const next = $theme.current === 'light' ? 'dark' : 'light';
+		const system = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
 
-		if (
-			upcoming_theme ===
-			(window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
-		) {
-			// Switch the preference to `system`
-			$theme.preference = 'system';
-		} else {
-			// Switch the preference to `light` or `dark`
-			$theme.preference = upcoming_theme;
-		}
-
-		$theme.current = upcoming_theme;
+		$theme.preference = next === system ? 'system' : next;
+		$theme.current = next;
 	}
 
-	const cb = (e: MediaQueryListEvent) =>
-		theme.set({ preference: $theme.preference, current: e.matches ? 'dark' : 'light' });
-
-	let query: MediaQueryList | undefined;
-
 	$effect(() => {
-		query?.removeEventListener('change', cb);
-
 		if ($theme.preference === 'system') {
-			query = window.matchMedia('(prefers-color-scheme: dark)');
-			query.addEventListener('change', cb);
+			const query = window.matchMedia('(prefers-color-scheme: dark)');
+
+			return on(query, 'change', (e) => {
+				$theme.current = e.matches ? 'dark' : 'light';
+			});
 		}
 	});
-
-	onDestroy(() => query?.removeEventListener('change', cb));
 </script>
 
 <button