feat: initialize React Spectrum template with layouts and showcases

1 files changed, 25 insertions, 0 deletions

diff --git a/src/theme.ts b/src/theme.ts
new file mode 100644
index 0000000..c05b24d
--- /dev/null
+++ b/src/theme.ts
@@ -0,0 +1,25 @@
+import { createContext, useContext } from 'react'
+
+export type ColorScheme = 'light' | 'dark'
+export const themeStorageKey = 'react-spectrum-color-scheme'
+
+export const ThemeContext = createContext<{
+  colorScheme: ColorScheme
+  setColorScheme: (colorScheme: ColorScheme) => void
+} | null>(null)
+
+export function getInitialColorScheme(): ColorScheme {
+  try {
+    const saved = localStorage.getItem(themeStorageKey)
+    if (saved === 'light' || saved === 'dark') return saved
+  } catch {
+    // Storage may be unavailable; theme switching still works for this session.
+  }
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+}
+
+export function useTheme() {
+  const theme = useContext(ThemeContext)
+  if (!theme) throw new Error('useTheme must be used within ThemeContext')
+  return theme
+}