theme switch button and tooltip

src/routes/+layout.svelte

@@ -5,8 +5,10 @@
 
     import { fly } from 'svelte/transition';
     import MediaQuery from 'svelte-media-queries';
-    export let hideOnPrint: boolean;
     import { Dices } from "@lucide/svelte";
+    let hideOnPrint: boolean;
+
+    let { children } = $props();
 
     import DeprivedLogo from "$lib/images/DeprivedLogo.svelte";
     import HamburgerMenuIcon from "$lib/images/HamburgerMenuIcon.svelte";
@@ -60,6 +62,11 @@
     }
 </script>
 
+{#snippet SwitchThemeButton()}
+<div class="tooltip tooltip-bottom grid place-content-center" data-tip="Switch theme">
+    <button class="cursor-pointer" on:click={nextTheme}> <Dices/></button>
+</div>
+{/snippet}
 
 <!-- Detect mobile -->
 <MediaQuery query='(max-width: {footerCollapseThreshold})' bind:matches={footerCollapse} />
@@ -79,7 +86,9 @@
 
                     <!-- <a href="/">Home</a> -->
                     <!-- <a href="/zhen/notes/physics/1?hideOnPrint=1" target="_blank" style="width: 7.5rem;">Notes</a> -->
-                    <button class="cursor-pointer" on:click={nextTheme}> <Dices/></button>
+
+                    {@render SwitchThemeButton()}
+                    
                     <a href="/zhen/cv/rev2?hideOnPrint=1" target="_blank" style="width: 7.5rem;">Zhen CV</a>
                     <a href="/tools" style="width: 7.5rem;">Tools</a>
                     <a href="https://botalex.itch.io/" target="_blank">Games</a>
@@ -93,6 +102,8 @@
                         <!-- <h3 id="logo-text">The Deprived Devs</h3> -->
                     </a>
                     <div class="nav-spacer" />
+                    {@render SwitchThemeButton()}
+                    <div class="px-1"></div>
                     <button id="toggle-nav" on:click={() => navbarHidden = !navbarHidden}>
                         <HamburgerMenuIcon Class="fill-base-content"/>
                     </button>
@@ -111,7 +122,7 @@
     </header>
     
     <!-- Page content -->
-    <slot />
+    {@render children?.()}
     
     <!-- About footer -->
     <div class="{hideOnPrint ? 'hide-on-print' : ''} flex flex-col justify-center pt-8 bg-base-300 mt-8">