@mohammad-irfan/create-dashboard-kit 1.0.0

package/templates/source/theme/ThemeContext.tsx

@@ -0,0 +1,82 @@
+import { createContext, useEffect, useState, type ReactNode } from 'react'
+
+export type Theme = 'light' | 'dark'
+
+export interface ThemeContextValue {
+  theme: Theme
+  setTheme: (theme: Theme) => void
+  toggleTheme: () => void
+  isDark: boolean
+}
+
+export const ThemeContext = createContext<ThemeContextValue | null>(null)
+
+export interface ThemeProviderProps {
+  children: ReactNode
+  defaultTheme?: Theme
+  storageKey?: string
+}
+
+const DEFAULT_STORAGE_KEY = 'starter_kit_theme'
+
+function getInitialTheme(defaultTheme?: Theme, storageKey = DEFAULT_STORAGE_KEY): Theme {
+  if (typeof window === 'undefined') return defaultTheme || 'light'
+
+  try {
+    const stored = localStorage.getItem(storageKey)
+    if (stored === 'light' || stored === 'dark') return stored
+  } catch {
+    // Ignore localStorage failures
+  }
+
+  if (defaultTheme) return defaultTheme
+
+  try {
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      return 'dark'
+    }
+  } catch {
+    // Ignore media match failures
+  }
+
+  return 'light'
+}
+
+export function ThemeProvider({
+  children,
+  defaultTheme,
+  storageKey = DEFAULT_STORAGE_KEY,
+}: ThemeProviderProps) {
+  const [theme, setThemeState] = useState<Theme>(() => getInitialTheme(defaultTheme, storageKey))
+
+  useEffect(() => {
+    if (typeof document === 'undefined') return
+    document.documentElement.setAttribute('data-theme', theme)
+    try {
+      localStorage.setItem(storageKey, theme)
+    } catch {
+      // Ignore quota errors
+    }
+  }, [theme, storageKey])
+
+  const setTheme = (nextTheme: Theme) => {
+    setThemeState(nextTheme)
+  }
+
+  const toggleTheme = () => {
+    setThemeState((prev) => (prev === 'dark' ? 'light' : 'dark'))
+  }
+
+  return (
+    <ThemeContext.Provider
+      value={{
+        theme,
+        setTheme,
+        toggleTheme,
+        isDark: theme === 'dark',
+      }}
+    >
+      {children}
+    </ThemeContext.Provider>
+  )
+}

package/templates/source/theme/useTheme.ts

@@ -0,0 +1,10 @@
+import { useContext } from 'react'
+import { ThemeContext, type ThemeContextValue } from './ThemeContext.tsx'
+
+export function useTheme(): ThemeContextValue {
+  const context = useContext(ThemeContext)
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider')
+  }
+  return context
+}