snorre

src/app.html

@@ -12,16 +12,19 @@
 		%sveltekit.head%
 
 		<script>
+			let theme = null;
+
 			if (typeof localStorage !== 'undefined') {
 				theme = localStorage.getItem('theme');
 			}
-			const themesArr =  ["green", "netherrack", "dark", "pink"];
+
+			window.AvailableThemes =  ["green", "netherrack", "dark", "pink"];
 			
 			if (!theme) {
 				const randomNumber = Math.floor(Math.random() * 4);
-				console.log("Slecting: " + themesArr[randomNumber]);
+				console.log("Slecting: " + AvailableThemes[randomNumber]);
-				document.documentElement.setAttribute('data-theme', themesArr[randomNumber]);
+				document.documentElement.setAttribute('data-theme', AvailableThemes[randomNumber]);
-				localStorage.setItem('theme', themesArr[randomNumber]);
+				localStorage.setItem('theme', AvailableThemes[randomNumber]);
 			} else {
 				console.log("Slecting: " + theme);
 				document.documentElement.setAttribute('data-theme', theme);

src/routes/+layout.svelte

@@ -5,7 +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";
@@ -37,8 +40,33 @@
         lock.name = 'darkreader-lock';
         document.head.appendChild(lock);
     });
+
+    function nextTheme(){
+        let theme: string | null = null;
+
+        if (typeof localStorage !== 'undefined') {
+            theme = localStorage.getItem('theme');
+        }
+
+        const themesArr = (window as any).AvailableThemes;
+        let nextTheme = "dark";
+        if (theme == "null" || theme == "undefined" || theme == undefined || theme == null){
+
+        } else {
+            nextTheme = themesArr[(1 - -themesArr.indexOf(theme)) % themesArr.length];
+        }
+
+        console.log("Slecting: " + nextTheme);
+        document.documentElement.setAttribute('data-theme', nextTheme);
+        localStorage.setItem('theme', nextTheme);
+    }
 </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} />
@@ -58,6 +86,9 @@
 
                     <!-- <a href="/">Home</a> -->
                     <!-- <a href="/zhen/notes/physics/1?hideOnPrint=1" target="_blank" style="width: 7.5rem;">Notes</a> -->
+
+                    {@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>
@@ -71,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>
@@ -89,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">

src/routes/comps/Profile.svelte

@@ -33,7 +33,7 @@
         <div class="developersProfile snorre-overlay relative pl-1 font-mono">
             <NameAndTag name="Snorre" tags={tags} isMobile={isMobile}/>
             <span>
-                <p>I'm the diversity hire. (Gay)</p>
+                <p>I'm the diversity hire. <span class="border-b" style="border-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); border-image-slice: 1;">(Gay)</span></p>
                 <!-- <p><a href="https://www.linkedin.com/in/snorrealtschul/" target="_blank" style="color:lightblue;">My website</a></p> -->
                 <p><a href="https://spoodythe.one/" target="_blank" style="color:lightblue;">My website</a></p>
             </span>