move context setter and getter

Author: jaminwebdev

src/contexts/ThemeContext.ts

@@ -0,0 +1,13 @@
+import { getContext, setContext } from 'svelte';
+
+type ThemeStore = {
+	currentTheme: string;
+	handleThemeChange: (theme: string) => void;
+};
+
+const themeKey = Symbol('theme');
+
+export const setThemeContext = (storeCreator: () => ThemeStore) =>
+	setContext(themeKey, storeCreator());
+
+export const getThemeContext = (): ThemeStore => getContext(themeKey);

src/lib/components/ThemeToggle.svelte

@@ -1,17 +1,15 @@
 <script lang="ts">
-	import { getContext } from 'svelte';
-
 	import { Sun, Moon } from '@lucide/svelte';
 	import * as Dialog from '@/lib/components/ui/dialog/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 } from '@/lib/utils/themes';
-	import type { ThemeContext } from '@/stores/ThemeStove.svelte';
+	import { getThemeContext } from '@/contexts/ThemeContext';
 
 	let isOpen = $state(false);
 
-	let { currentTheme, handleThemeChange } = $derived(getContext<ThemeContext>('theme'));
+	let { currentTheme, handleThemeChange } = $derived(getThemeContext());
 
 	const handleThemeSelection = (value: string) => {
 		handleThemeChange(value);

src/lib/components/showcase/ThemeCard.svelte

@@ -5,10 +5,9 @@
 	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 { getContext } from 'svelte';
-	import type { ThemeContext } from '@/stores/ThemeStove.svelte';
+	import { getThemeContext } from '@/contexts/ThemeContext';
 
-	let { currentTheme, handleThemeChange } = $derived(getContext<ThemeContext>('theme'));
+	let { currentTheme, handleThemeChange } = $derived(getThemeContext());
 </script>
 
 <Card.Root>

src/routes/+layout.svelte

@@ -1,13 +1,14 @@
 <script lang="ts">
 	import '../app.css';
-	import { setContext, type Snippet } from 'svelte';
+	import { 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';
+	import { setThemeContext } from '@/contexts/ThemeContext';
 
-	setContext('theme', useTheme());
+	setThemeContext(useTheme);
 
 	const { children }: { children: Snippet } = $props();
 </script>