Theme switcher

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

@@ -6,6 +6,7 @@
     import { fly } from 'svelte/transition';
     import MediaQuery from 'svelte-media-queries';
     export let hideOnPrint: boolean;
+    import { Dices } from "@lucide/svelte";
 
     import DeprivedLogo from "$lib/images/DeprivedLogo.svelte";
     import HamburgerMenuIcon from "$lib/images/HamburgerMenuIcon.svelte";
@@ -37,6 +38,26 @@
         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>
 
 
@@ -58,6 +79,7 @@
 
                     <!-- <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>
                     <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>