for Deno Deploy

elsoul · Oct 30, 2024 · cee9726 · cee9726
1 parent e68c37b
commit cee9726
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 28 deletions.
diff --git a/deno.json b/deno.json
@@ -1,6 +1,6 @@
 {
   "name": "@elsoul/fresh-theme",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "Theme Module for Fresh v2 App.",
   "runtimes": ["deno", "browser"],
   "exports": "./mod.ts",

diff --git a/mod.ts b/mod.ts
@@ -1,5 +1,5 @@
-import { useEffect } from 'preact/hooks'
-import { type Atom, atom, useAtom } from 'fresh-atom'
+import { useEffect } from 'npm:preact@10.24.3/hooks'
+import { type Atom, atom, useAtom } from 'jsr:@elsoul/fresh-atom@1.0.0'
 
 /**
  * Atom for theme management, storing either 'dark' or 'light' mode.
@@ -8,7 +8,7 @@ import { type Atom, atom, useAtom } from 'fresh-atom'
  * @type {Atom<'dark' | 'light'>}
  */
 export const themeAtom: Atom<'dark' | 'light'> = atom(
-  (localStorage.getItem('theme') as 'dark' | 'light') || 'dark',
+  (globalThis.localStorage?.getItem('theme') as 'dark' | 'light') || 'dark',
 )
 
 /**
@@ -19,22 +19,22 @@ export const themeAtom: Atom<'dark' | 'light'> = atom(
  */
 export const defaultDarkModeScript: string = `
   function applyDefaultTheme(change) {
-    if (!("theme" in localStorage)) {
-      localStorage.theme = 'dark';  // Ensure dark mode is set as default
+    if (!("theme" in globalThis.localStorage)) {
+      globalThis.localStorage.theme = 'dark';  // Ensure dark mode is set as default
     }
 
     if (change === 'auto') {
-      delete localStorage.theme;
+      delete globalThis.localStorage.theme;
     } else if (change === 'on') {
-      localStorage.theme = 'dark';
+      globalThis.localStorage.theme = 'dark';
     } else if (change === 'off') {
-      localStorage.theme = 'light';
+      globalThis.localStorage.theme = 'light';
     }
 
-    window.isDark = localStorage.theme === "dark" || 
-      (!("theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches);
+    globalThis.isDark = globalThis.localStorage.theme === "dark" || 
+      (!("theme" in globalThis.localStorage) && globalThis.matchMedia("(prefers-color-scheme: dark)").matches);
 
-    document.documentElement.classList[window.isDark ? 'add' : 'remove']("dark");
+    document.documentElement.classList[globalThis.isDark ? 'add' : 'remove']("dark");
   }
   applyDefaultTheme();
 `
@@ -47,14 +47,14 @@ export const defaultDarkModeScript: string = `
  */
 export const defaultLightModeScript: string = `
   function applyDefaultTheme(change) {
-    if (change === 'auto') delete localStorage.theme; 
-    else if (change === 'on') localStorage.theme = 'dark'; 
-    else if (change === 'off') localStorage.theme = 'light';
+    if (change === 'auto') delete globalThis.localStorage.theme; 
+    else if (change === 'on') globalThis.localStorage.theme = 'dark'; 
+    else if (change === 'off') globalThis.localStorage.theme = 'light';
 
-    window.isDark = localStorage.theme === "dark" || 
-      (localStorage.theme !== "light" && window.matchMedia("(prefers-color-scheme: dark)").matches);
+    globalThis.isDark = globalThis.localStorage.theme === "dark" || 
+      (globalThis.localStorage.theme !== "light" && globalThis.matchMedia("(prefers-color-scheme: dark)").matches);
     
-    document.documentElement.classList[window.isDark ? 'add' : 'remove']("dark");
+    document.documentElement.classList[globalThis.isDark ? 'add' : 'remove']("dark");
   }
   applyDefaultTheme();
 `
@@ -66,7 +66,9 @@ export const defaultLightModeScript: string = `
  * @param {'dark' | 'light'} newTheme - The theme to set, either 'dark' or 'light'.
  */
 export function setTheme(newTheme: 'dark' | 'light'): void {
-  localStorage.setItem('theme', newTheme)
+  if (globalThis.localStorage) {
+    globalThis.localStorage.setItem('theme', newTheme)
+  }
   if (globalThis.document) {
     document.documentElement.classList.toggle('dark', newTheme === 'dark')
   }
@@ -95,15 +97,19 @@ export function useTheme(): UseThemeReturn {
   const [theme, setTheme] = useAtom(themeAtom)
 
   useEffect(() => {
-    const handleStorageChange = () => {
-      const savedTheme = localStorage.getItem('theme') as 'dark' | 'light'
-      setTheme(savedTheme || 'dark')
-    }
+    if (globalThis.localStorage) {
+      const handleStorageChange = () => {
+        const savedTheme = globalThis.localStorage.getItem('theme') as
+          | 'dark'
+          | 'light'
+        setTheme(savedTheme || 'dark')
+      }
 
-    globalThis.addEventListener('storage', handleStorageChange)
+      globalThis.addEventListener('storage', handleStorageChange)
 
-    return () => {
-      globalThis.removeEventListener('storage', handleStorageChange)
+      return () => {
+        globalThis.removeEventListener('storage', handleStorageChange)
+      }
     }
   }, [])
 
@@ -114,8 +120,12 @@ export function useTheme(): UseThemeReturn {
    * @param {'dark' | 'light'} newTheme - The theme to set, either 'dark' or 'light'.
    */
   const updateTheme = (newTheme: 'dark' | 'light') => {
-    localStorage.setItem('theme', newTheme)
-    document.documentElement.classList.toggle('dark', newTheme === 'dark')
+    if (globalThis.localStorage) {
+      globalThis.localStorage.setItem('theme', newTheme)
+    }
+    if (globalThis.document) {
+      document.documentElement.classList.toggle('dark', newTheme === 'dark')
+    }
     setTheme(newTheme)
   }