Fix theme toggle button opacity (#302)

* fix theme toggle button opacity

* optimise

* fix/simplify

* fix/simplify

* fix/simplify

Author: Rich-Harris

apps/svelte.dev/src/lib/icons/theme-dark.svg

@@ -1,92 +1,45 @@
 <script lang="ts">
+	import { on } from 'svelte/events';
 	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';
-
-		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;
-		}
+		const next = $theme.current === 'light' ? 'dark' : 'light';
+		const system = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
 
-		$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>
 
-<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'}
+	aria-label="Toggle dark mode"
+></button>
 
 <style>
 	button {
 		width: 3.2rem;
 		aspect-ratio: 1;
 		background: red;
 		background: url($lib/icons/theme-light.svg) no-repeat 50% 50% / 2.3rem 2.3rem;
-		opacity: 0.6;
+		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>

apps/svelte.dev/src/lib/icons/theme-light.svg

@@ -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>