Implement theme management with helper script and update ThemeSelect component

eduardolat · eduardolat · commit 2218b72e33fe · 2025-02-27T18:20:38.000Z
diff --git a/src/app.html b/src/app.html
@@ -42,7 +42,7 @@
 
     <link rel="icon" href="%sveltekit.assets%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <script src="https://cdn.jsdelivr.net/npm/theme-change@2.0.2/index.js"></script>
+
     <script
       src="https://cdn.jsdelivr.net/npm/notyf@3.10.0/notyf.min.js"
       defer
@@ -51,6 +51,9 @@
       rel="stylesheet"
       href="https://cdn.jsdelivr.net/npm/notyf@3.10.0/notyf.min.css"
     />
+
+    <script src="%sveltekit.assets%/theme-helper.js"></script>
+
     %sveltekit.head%
   </head>
   <body data-sveltekit-preload-data="hover">
diff --git a/src/lib/client/components/ThemeSelect.svelte b/src/lib/client/components/ThemeSelect.svelte
@@ -1,17 +1,33 @@
-<!-- This uses the following library to handle theme changes -->
-<!-- https://github.com/saadeghi/theme-change -->
+<!--
+  This uses the following helper to handle theme changes and is loaded
+  in the head of the document to prevent any flash of unstyled content.
+
+  /static/theme-helper.js
+-->
 
 <script lang="ts">
+  import { onMount } from "svelte";
+
   interface Props {
     class?: string;
   }
   let { class: className = "" }: Props = $props();
+
+  let currentTheme = $state("");
+  onMount(() => {
+    const theme = (window as any).getTheme();
+    currentTheme = theme || "system";
+  });
+
+  $effect(() => {
+    (window as any).setTheme(currentTheme);
+  });
 </script>
 
 <label class="select {className}">
   <span class="label">Theme</span>
-  <select data-choose-theme>
-    <option value="">System 🖥️</option>
+  <select bind:value={currentTheme}>
+    <option value="system">System 🖥️</option>
     <option value="light">Light ☀️</option>
     <option value="dark">Dark 🌑</option>
     <option value="dracula">Dracula 🧛</option>
diff --git a/static/theme-helper.js b/static/theme-helper.js
@@ -0,0 +1,21 @@
+function initThemeHelper() {
+  function getTheme() {
+    const theme = localStorage.getItem("theme");
+    return theme || "";
+  }
+
+  function setTheme(theme) {
+    if (theme === "system") theme = "";
+
+    localStorage.setItem("theme", theme);
+    document.documentElement.setAttribute("data-theme", theme);
+  }
+
+  window.getTheme = getTheme;
+  window.setTheme = setTheme;
+
+  const theme = getTheme();
+  setTheme(theme);
+}
+
+initThemeHelper();
