fix: save current theme to handle system theme change (#20)

build.sh

@@ -1,10 +1,9 @@
 cd $(dirname $0)
 export PATH=$PATH:$PWD/node_modules/.bin
 
-esbuild --minify --bundle --outdir=temp lib/theme-script.ts
-echo "" > lib/theme-script.astro
+echo "{/* Auto-generated by build.sh */}" > lib/theme-script.astro
 echo "<script is:inline>" >> lib/theme-script.astro
-cat temp/theme-script.js >> lib/theme-script.astro
+esbuild --minify --bundle lib/theme-script.ts >> lib/theme-script.astro
 echo "</script>" >> lib/theme-script.astro
 
 astro build 

lib/theme-script.astro

@@ -1,4 +1,4 @@
-
+{/* Auto-generated by build.sh */}
 <script is:inline>
-"use strict";(()=>{(()=>{let t="theme-toggle";function n(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}function a(){let e=localStorage.getItem(t);return e==="dark"||e==="light"?e:null}function r(){return a()||n()}function c(e){e===n()?localStorage.removeItem(t):localStorage.setItem(t,e)}function l(e){let o=document.documentElement;o.classList.toggle("dark",e==="dark"),o.dataset.theme=e,o.style.colorScheme=e}function m(e){c(e),l(e)}function s(){m(r())}s(),document.addEventListener("astro:after-swap",s),window.astroThemeToggle={setTheme:m,getTheme:r}})();})();
+"use strict";(()=>{(()=>{let t="theme-toggle",n;function r(){return window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}function l(){let e=localStorage.getItem(t);return e==="dark"||e==="light"?e:null}function m(){return n||l()||r()}function s(e){e===r()?localStorage.removeItem(t):localStorage.setItem(t,e)}function h(e){let o=document.documentElement;o.classList.toggle("dark",e==="dark"),o.dataset.theme=e,o.style.colorScheme=e}function a(e){n=e,s(e),h(e)}function c(){a(m())}c(),document.addEventListener("astro:after-swap",c),window.astroThemeToggle={setTheme:a,getTheme:m}})();})();
 </script>

lib/theme-script.ts

@@ -3,22 +3,24 @@
 
   const storageKey = 'theme-toggle'
 
+  let currentTheme: Theme | undefined
+
   function getSystemTheme(): Theme {
     return window.matchMedia('(prefers-color-scheme: dark)').matches
       ? 'dark'
       : 'light'
   }
 
-  function getUserTheme(): Theme | null {
+  function getStoredTheme(): Theme | null {
     const theme = localStorage.getItem(storageKey)
     return theme === 'dark' || theme === 'light' ? theme : null
   }
 
   function getTheme(): Theme {
-    return getUserTheme() || getSystemTheme()
+    return currentTheme || getStoredTheme() || getSystemTheme()
   }
 
-  function setUserTheme(theme: Theme) {
+  function setStoredTheme(theme: Theme) {
     if (theme === getSystemTheme()) {
       localStorage.removeItem(storageKey)
     } else {
@@ -34,7 +36,8 @@
   }
 
   function setTheme(theme: Theme) {
-    setUserTheme(theme)
+    currentTheme = theme
+    setStoredTheme(theme)
     setStyle(theme)
   }