import { useLayoutEffect, useState } from 'react';
const THEME_STORAGE_KEY = 'val-theme';
export function useTheme() {
const [darkMode, setDarkMode] = useState(() => {
const savedTheme = localStorage.getItem(THEME_STORAGE_KEY);
if (savedTheme === 'dark' || savedTheme === 'light') {
return savedTheme === 'dark';
}
return window.matchMedia('(prefers-color-scheme: dark)').matches;
});
useLayoutEffect(() => {
document.documentElement.classList.toggle('dark', darkMode);
localStorage.setItem(THEME_STORAGE_KEY, darkMode ? 'dark' : 'light');
}, [darkMode]);
return {
darkMode,
toggleTheme: () => setDarkMode((enabled) => !enabled),
};
}