fixed darkmode switch position

src/app.css

@@ -6,5 +6,5 @@ body {
 	transition:
 		background-color 0.2s ease-in-out,
 		color 0.2s ease-in-out;
-	@apply bg-stone-100 dark:bg-gray-950 text-black dark:text-stone-100 text-center;
+	@apply bg-stone-100 dark:bg-gray-900 text-slate-600 dark:text-stone-100 text-center;
 }

src/lib/ThemeSwitch.svelte

@@ -1,48 +0,0 @@
-<script>
-    // On click function for darkmode switch
-    import { browser } from '$app/environment';
-    let darkMode = true;
-    function handleSwitchDarkMode() {
-        darkMode = !darkMode;
-        localStorage.setItem('theme', darkMode ? 'dark' : 'light');
-        darkMode
-            ? document.documentElement.classList.add('dark')
-            : document.documentElement.classList.remove('dark');
-    }
-    if (browser) {
-        if (
-            localStorage.theme === 'dark' ||
-            (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)
-        ) {
-            document.documentElement.classList.add('dark');
-            darkMode = true;
-        } else {
-            document.documentElement.classList.remove('dark');
-            darkMode = false;
-        }
-    }
-</script>
-
-<div>
-    <input checked={darkMode} on:click={handleSwitchDarkMode} type="checkbox" id="theme-toggle" />
-    <label for="theme-toggle" />
-</div>
-
-<style>
-    #theme-toggle {
-        @apply invisible;
-    }
-
-    #theme-toggle + label {
-        @apply inline-block cursor-pointer h-6 w-6 fixed top-4 right-4 rounded-full duration-300 content-[''];
-    }
-
-    #theme-toggle:not(:checked) + label {
-        @apply bg-yellow-200;
-    }
-
-    #theme-toggle:checked + label {
-        @apply bg-transparent;
-        box-shadow: inset -7px -5px 1px 1px #ddd;
-    }
-</style>

src/routes/+layout.svelte

@@ -1,8 +1,6 @@
 <script>
 	import { blur } from 'svelte/transition';
 	import '../app.css';
-	import ThemeSwitch from '$lib/ThemeSwitch.svelte';
-	import '../app.css';
 	import CloudflareAnalytics from '../lib/CloudflareAnalytics.svelte';
 	import { DarkMode } from 'flowbite-svelte';
 
@@ -74,7 +72,9 @@
 			{/each}
 		</ul>
 	{/key}
+	<div class="absolute top-6 right-6">
 		<DarkMode />
+	</div>
 </nav>
 <div class="mx-auto max-w-xs sm:max-w-md md:max-w-3xl text-center">
 	<slot />