50 lines
1.3 KiB
JavaScript
50 lines
1.3 KiB
JavaScript
"use client";
|
|
import { createContext, useContext, useState, useEffect } from "react";
|
|
|
|
const ThemeContext = createContext();
|
|
|
|
export function ThemeProvider({ children }) {
|
|
// Initialize with undefined to detect client-side
|
|
const [darkMode, setDarkMode] = useState(undefined);
|
|
|
|
useEffect(() => {
|
|
// Check for saved preference or system preference
|
|
const savedMode = localStorage.getItem('darkMode');
|
|
if (savedMode !== null) {
|
|
setDarkMode(savedMode === 'true');
|
|
} else if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
|
setDarkMode(true);
|
|
} else {
|
|
setDarkMode(false); // Explicitly set light mode if no preference
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
// Apply class to document element
|
|
if (darkMode) {
|
|
document.documentElement.classList.add('dark');
|
|
} else {
|
|
document.documentElement.classList.remove('dark');
|
|
}
|
|
// Save preference
|
|
localStorage.setItem('darkMode', darkMode);
|
|
}, [darkMode]);
|
|
|
|
const toggleDarkMode = () => {
|
|
setDarkMode(!darkMode);
|
|
};
|
|
|
|
return (
|
|
<ThemeContext.Provider value={{ darkMode, toggleDarkMode }}>
|
|
{children}
|
|
</ThemeContext.Provider>
|
|
);
|
|
}
|
|
|
|
export function useTheme() {
|
|
const context = useContext(ThemeContext);
|
|
if (!context) {
|
|
throw new Error('useTheme must be used within a ThemeProvider');
|
|
}
|
|
return context;
|
|
} |