refactor: consolidate utilities, clean up components, and improve theme persistence
- Consolidate common utilities (cn, format, time) into lib/utils - Remove redundant utility files from pastel and units directories - Clean up unused components (Separator, KeyboardShortcutsHelp) - Relocate CommandPalette to components/units/ui/ - Force dark mode on landing page and improve theme persistence logic - Add FOUC prevention script to RootLayout - Fix sidebar height constraint in AppShell
This commit is contained in:
@@ -15,16 +15,21 @@ const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
|
||||
export function ThemeProvider({ children }: { children: React.ReactNode }) {
|
||||
const [theme, setTheme] = useState<Theme>('dark');
|
||||
const [resolvedTheme, setResolvedTheme] = useState<'light' | 'dark'>('dark');
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
// Load theme from localStorage on mount
|
||||
useEffect(() => {
|
||||
// Load theme from localStorage
|
||||
const stored = localStorage.getItem('theme') as Theme | null;
|
||||
if (stored) {
|
||||
setTheme(stored);
|
||||
}
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
// Apply theme to document element and save to localStorage
|
||||
useEffect(() => {
|
||||
if (!mounted) return;
|
||||
|
||||
const root = window.document.documentElement;
|
||||
|
||||
// Remove previous theme classes
|
||||
@@ -43,10 +48,12 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
|
||||
|
||||
// Save to localStorage
|
||||
localStorage.setItem('theme', theme);
|
||||
}, [theme]);
|
||||
}, [theme, mounted]);
|
||||
|
||||
// Listen for system theme changes
|
||||
useEffect(() => {
|
||||
if (!mounted) return;
|
||||
|
||||
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
|
||||
const handleChange = () => {
|
||||
@@ -60,7 +67,7 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
|
||||
|
||||
mediaQuery.addEventListener('change', handleChange);
|
||||
return () => mediaQuery.removeEventListener('change', handleChange);
|
||||
}, [theme]);
|
||||
}, [theme, mounted]);
|
||||
|
||||
return (
|
||||
<ThemeContext.Provider value={{ theme, setTheme, resolvedTheme }}>
|
||||
|
||||
Reference in New Issue
Block a user