move theme to rune store/hook

Author: jaminwebdev

src/lib/components/ThemeToggle.svelte

@@ -1,34 +1,22 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import { getContext } from 'svelte';
 
 	import { Sun, Moon } from '@lucide/svelte';
 	import * as Dialog from '@/lib/components/ui/dialog/index.js';
-	import { Button, buttonVariants } from '@/lib/components/ui/button/index.js';
+	import { buttonVariants } from '@/lib/components/ui/button/index.js';
 	import * as RadioGroup from '@/lib/components/ui/radio-group/index';
 	import { Label } from '@/lib/components/ui/label';
-	import { themes, type ThemeOptions } from '@/lib/utils/themes';
+	import { themes } from '@/lib/utils/themes';
+	import type { ThemeContext } from '@/stores/ThemeStove.svelte';
 
-	let currentTheme = $state(themes[0]);
 	let isOpen = $state(false);
 
-	onMount(() => {
-		const storedTheme = localStorage.getItem('theme');
-		if (storedTheme) return handleThemeChange(storedTheme);
-		checkSystemColorPreference();
-	});
+	let { currentTheme, handleThemeChange } = $derived(getContext<ThemeContext>('theme'));
 
-	const handleThemeChange = (theme: ThemeOptions) => {
-		currentTheme = theme;
-		document.documentElement.className = '';
-		document.documentElement.classList.add(theme);
-		localStorage.setItem('theme', theme);
+	const handleThemeSelection = (value: string) => {
+		handleThemeChange(value);
 		isOpen = false;
 	};
-
-	const checkSystemColorPreference = () => {
-		const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
-		currentTheme = prefersDarkScheme ? 'dark' : 'light';
-	};
 </script>
 
 <Dialog.Root bind:open={isOpen}>
@@ -47,7 +35,7 @@
 		</div>
 	</Dialog.Trigger>
 	<Dialog.Content class="max-h-[75vh] overflow-y-scroll">
-		<RadioGroup.Root value={currentTheme} onValueChange={handleThemeChange}>
+		<RadioGroup.Root value={currentTheme} onValueChange={handleThemeSelection}>
 			{#each themes as theme}
 				<div class="flex items-center space-x-2">
 					<RadioGroup.Item value={theme} id={theme} />

src/lib/components/showcase/ThemeCard.svelte

@@ -1,31 +1,14 @@
 <script lang="ts">
 	import * as Card from '@/lib/components/ui/card/index';
 	import { ScrollArea } from '@/lib/components/ui/scroll-area/index';
-	import { themes, type ThemeOptions } from '@/lib/utils/themes';
+	import { themes } from '@/lib/utils/themes';
 	import { Sun, Moon } from '@lucide/svelte';
 	import * as RadioGroup from '@/lib/components/ui/radio-group/index';
 	import Label from '@/lib/components/ui/label/label.svelte';
-	import { onMount } from 'svelte';
+	import { getContext } from 'svelte';
+	import type { ThemeContext } from '@/stores/ThemeStove.svelte';
 
-	let currentTheme = $state(themes[0]);
-
-	onMount(() => {
-		const storedTheme = localStorage.getItem('theme');
-		if (storedTheme) return handleThemeChange(storedTheme);
-		checkSystemColorPreference();
-	});
-
-	const handleThemeChange = (theme: ThemeOptions) => {
-		currentTheme = theme;
-		document.documentElement.className = '';
-		document.documentElement.classList.add(theme);
-		localStorage.setItem('theme', theme);
-	};
-
-	const checkSystemColorPreference = () => {
-		const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
-		currentTheme = prefersDarkScheme ? 'dark' : 'light';
-	};
+	let { currentTheme, handleThemeChange } = $derived(getContext<ThemeContext>('theme'));
 </script>
 
 <Card.Root>

src/routes/+layout.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
 	import '../app.css';
-	import type { Snippet } from 'svelte';
+	import { setContext, type Snippet } from 'svelte';
 	import { ClerkProvider } from 'svelte-clerk';
 	import Footer from '@/lib/components/Footer.svelte';
 	import { Toaster } from '@/lib/components/ui/sonner/index.js';
 	import { PUBLIC_CLERK_PUBLISHABLE_KEY } from '$env/static/public';
+	import { useTheme } from '@/stores/ThemeStove.svelte';
+
+	setContext('theme', useTheme());
 
 	const { children }: { children: Snippet } = $props();
 </script>

src/stores/ThemeStove.svelte.ts

@@ -0,0 +1,35 @@
+import { themes, type ThemeOptions } from '@/lib/utils/themes';
+
+export const useTheme = () => {
+	let currentTheme = $state(themes[0]);
+
+	$effect(() => {
+		const storedTheme = localStorage.getItem('theme');
+		if (storedTheme) return handleThemeChange(storedTheme);
+		checkSystemColorPreference();
+	});
+
+	const handleThemeChange = (theme: ThemeOptions) => {
+		currentTheme = theme;
+		document.documentElement.className = '';
+		document.documentElement.classList.add(theme);
+		localStorage.setItem('theme', theme);
+	};
+
+	const checkSystemColorPreference = () => {
+		const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+		currentTheme = prefersDarkScheme ? 'dark' : 'light';
+	};
+
+	return {
+		get currentTheme() {
+			return currentTheme;
+		},
+		handleThemeChange
+	};
+};
+
+export type ThemeContext = {
+	currentTheme: string;
+	handleThemeChange: (theme: string) => void;
+};