From cee97260c0597468e1cb3c7ebd0bf0c8c3113340 Mon Sep 17 00:00:00 2001 From: KishiTheMechanic <s.kishi@elsoul.nl> Date: Wed, 30 Oct 2024 14:10:10 +0100 Subject: [PATCH] for Deno Deploy --- deno.json | 2 +- mod.ts | 64 ++++++++++++++++++++++++++++++++----------------------- 2 files changed, 38 insertions(+), 28 deletions(-) diff --git a/deno.json b/deno.json index e43448e..80194e5 100644 --- 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 index 622dfca..240c419 100644 --- 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) }