aboutsummaryrefslogtreecommitdiff
path: root/src/hooks/theme.tsx
diff options
context:
space:
mode:
authorschererleander <leander@schererleander.de>2025-05-30 01:01:17 +0200
committerschererleander <leander@schererleander.de>2025-05-30 01:01:17 +0200
commitafdc982863b6cca573f1db58e1795aa8c45fabca (patch)
tree6b94d2ffdcb0e1b5ccbaf584c825763ab72ab99d /src/hooks/theme.tsx
parent8f2c8393510dfefc22871661b0ef9964569e290b (diff)
rewrite site
Diffstat (limited to 'src/hooks/theme.tsx')
-rw-r--r--src/hooks/theme.tsx33
1 files changed, 33 insertions, 0 deletions
diff --git a/src/hooks/theme.tsx b/src/hooks/theme.tsx
new file mode 100644
index 0000000..d65b18c
--- /dev/null
+++ b/src/hooks/theme.tsx
@@ -0,0 +1,33 @@
+// hooks/theme.ts
+import { useState, useEffect, useCallback } from 'react';
+
+type Theme = 'light' | 'dark';
+
+const STORAGE_KEY = 'theme';
+
+export function useTheme() {
+ const [theme, setTheme] = useState<Theme>(() => {
+ const stored = typeof window !== 'undefined' ? localStorage.getItem(STORAGE_KEY) : null;
+ if (stored === 'light' || stored === 'dark') {
+ return stored;
+ }
+
+ if (typeof window !== 'undefined' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+ return 'dark';
+ }
+ return 'light';
+ });
+
+ useEffect(() => {
+ const root = document.documentElement;
+ root.setAttribute('data-theme', theme);
+ root.classList.toggle('dark', theme === 'dark');
+ localStorage.setItem(STORAGE_KEY, theme);
+ }, [theme]);
+
+ const toggleTheme = useCallback(() => {
+ setTheme(prev => (prev === 'dark' ? 'light' : 'dark'));
+ }, []);
+
+ return { theme, toggleTheme };
+}