fixed #4 docs theme error on first visit (#5)

* fix * start light
meursyphus · Aug 4, 2024 · 9ed9433 · 9ed9433
1 parent aea710a
commit 9ed9433
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 6 deletions.
diff --git a/packages/docs/src/app.html b/packages/docs/src/app.html
@@ -2,7 +2,7 @@
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/icon.svg" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
+
 		<link rel="icon" href="%sveltekit.assets%/icon.svg" />
 		<link rel="alternate" type="application/atom+xml" href="/rss.xml" />
 
@@ -25,7 +25,7 @@
 			const theme = localStorage.getItem('color-scheme')
 			theme
 				? document.documentElement.setAttribute('color-scheme', theme)
-				: localStorage.setItem('color-scheme', 'dark')
+				: localStorage.setItem('color-scheme', 'light')
 		</script>
 	</head>
 	<body data-sveltekit-preload-data="hover">

diff --git a/packages/docs/src/routes/(app)/+layout.svelte b/packages/docs/src/routes/(app)/+layout.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
 	import Header from './header.svelte';
 	import Footer from './footer.svelte';
-	import { theme } from '$lib/theme';
 </script>
 
-<div class="app" class:dark={$theme === 'dark'}>
+<div class="app">
 	<Header />
 	<main>
 		<slot />
@@ -43,7 +42,7 @@
 	}
 
 	/* Dark mode styles */
-	.app.dark {
+	:global(html[color-scheme='dark']) .app {
 		background-color: var(--color-bg-dark);
 		color: var(--color-text-dark);
 	}

diff --git a/packages/docs/src/routes/(app)/+page.svelte b/packages/docs/src/routes/(app)/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
 	import { fade, fly } from 'svelte/transition';
 	import * as config from '$lib/config';
 </script>