improve

elsoul · Oct 28, 2024 · f24017e · f24017e
1 parent d8359ed
commit f24017e
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -117,6 +117,27 @@ Adjusts the `<html>` element to reflect the new theme.
 - **Parameters**:
   - `newTheme` - The desired theme, either `'dark'` or `'light'`.
 
+### useTheme hook
+
+```typescript
+import { useTheme } from 'jsr:@elsoul/fresh-theme'
+
+function ThemeToggleButton() {
+  const { theme, setTheme } = useTheme()
+
+  const toggleTheme = () => {
+    const newTheme = theme === 'dark' ? 'light' : 'dark'
+    setTheme(newTheme)
+  }
+
+  return (
+    <button onClick={toggleTheme}>
+      Switch to {theme === 'dark' ? 'Light' : 'Dark'} Mode
+    </button>
+  )
+}
+```
+
 ## Contributing
 
 Bug reports and pull requests are welcome on GitHub at

diff --git a/deno.json b/deno.json
@@ -1,6 +1,6 @@
 {
   "name": "@elsoul/fresh-theme",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Theme Module for Fresh v2 App.",
   "runtimes": ["deno", "browser"],
   "exports": "./mod.ts",

diff --git a/mod.ts b/mod.ts
@@ -73,27 +73,50 @@ export function setTheme(newTheme: 'dark' | 'light'): void {
 
 /**
  * Custom hook to manage the theme (light or dark) based on localStorage.
- * Returns the current theme value.
+ * Provides a function to set the theme and returns the current theme value.
  *
- * @returns {'dark' | 'light'} The current theme.
+ * @returns {{ theme: 'dark' | 'light', setTheme: (newTheme: 'dark' | 'light') => void }}
+ * An object containing the current theme and a function to set the theme.
  */
-export function useTheme(): 'dark' | 'light' {
+export function useTheme() {
   const theme = useSignal<'dark' | 'light'>(
-    localStorage.getItem('theme') as 'dark' | 'light' || 'dark',
+    (localStorage.getItem('theme') as 'dark' | 'light') || 'dark',
   )
 
   useEffect(() => {
     const handleStorageChange = () => {
-      theme.value = localStorage.getItem('theme') as 'dark' | 'light' || 'dark'
+      theme.value = (localStorage.getItem('theme') as 'dark' | 'light') ||
+        'dark'
     }
 
-    globalThis.addEventListener('themeLocalStorage', handleStorageChange)
+    // Add listener for storage changes (works across tabs)
+    globalThis.addEventListener('storage', handleStorageChange)
 
     // Cleanup the event listener on unmount
     return () => {
-      globalThis.removeEventListener('themeLocalStorage', handleStorageChange)
+      globalThis.removeEventListener('storage', handleStorageChange)
     }
   }, [])
 
-  return theme.value
+  /**
+   * Sets the theme to either 'dark' or 'light' mode and saves the choice in localStorage.
+   * When a user toggles the theme, this function updates the theme in localStorage
+   * and adjusts the `dark` class on the `<html>` element.
+   *
+   * @param {'dark' | 'light'} newTheme - The theme to set, either 'dark' or 'light'.
+   */
+  const setTheme = (newTheme: 'dark' | 'light'): void => {
+    localStorage.setItem('theme', newTheme)
+
+    // If running in a client environment with document access
+    if (globalThis.document) {
+      // Apply or remove the 'dark' class on the <html> element
+      document.documentElement.classList.toggle('dark', newTheme === 'dark')
+    }
+
+    // Update the signal value
+    theme.value = newTheme
+  }
+
+  return { theme: theme.value, setTheme }
 }