aboutsummaryrefslogtreecommitdiffstatshomepage
path: root/src/theme.ts
diff options
context:
space:
mode:
Diffstat (limited to 'src/theme.ts')
-rw-r--r--src/theme.ts25
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
+}