feat(web) dark mode (#867)

web/src/routes/+layout.svelte

@@ -15,8 +15,10 @@
 	let localVersion: string;
 	let remoteVersion: string;
 	let showNavigationLoadingBar = false;
+	let canShow = false;
 
 	onMount(async () => {
+		checkUserTheme();
 		const res = await checkAppVersion();
 
 		shouldShowAnnouncement = res.shouldShowAnnouncement;
@@ -24,6 +26,21 @@
 		remoteVersion = res.remoteVersion ?? 'unknown';
 	});
 
+	const checkUserTheme = () => {
+		// On page load or when changing themes, best to add inline in `head` to avoid FOUC
+		if (
+			localStorage.getItem('color-theme') === 'dark' ||
+			(!('color-theme' in localStorage) &&
+				window.matchMedia('(prefers-color-scheme: dark)').matches)
+		) {
+			document.documentElement.classList.add('dark');
+		} else {
+			document.documentElement.classList.remove('dark');
+		}
+
+		canShow = true;
+	};
+
 	beforeNavigate(() => {
 		showNavigationLoadingBar = true;
 	});
@@ -34,24 +51,24 @@
 </script>
 
 <main>
-	<!-- {#key $page.url} -->
-	<div in:fade={{ duration: 100 }}>
-		{#if showNavigationLoadingBar}
-			<NavigationLoadingBar />
-		{/if}
+	{#if canShow}
+		<div in:fade={{ duration: 100 }}>
+			{#if showNavigationLoadingBar}
+				<NavigationLoadingBar />
+			{/if}
 
-		<slot />
+			<slot />
 
-		<DownloadPanel />
-		<UploadPanel />
-		<NotificationList />
-		{#if shouldShowAnnouncement}
-			<AnnouncementBox
-				{localVersion}
-				{remoteVersion}
-				on:close={() => (shouldShowAnnouncement = false)}
-			/>
-		{/if}
-	</div>
-	<!-- {/key} -->
+			<DownloadPanel />
+			<UploadPanel />
+			<NotificationList />
+			{#if shouldShowAnnouncement}
+				<AnnouncementBox
+					{localVersion}
+					{remoteVersion}
+					on:close={() => (shouldShowAnnouncement = false)}
+				/>
+			{/if}
+		</div>
+	{/if}
 </main>