wehub-resource-sync
48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
// Theme management utility
|
|
export type Theme = 'light' | 'dark';
|
|
|
|
export const THEME_KEY = 'claude-theme';
|
|
|
|
export function getTheme(): Theme {
|
|
if (typeof window === 'undefined') return 'dark';
|
|
const stored = localStorage.getItem(THEME_KEY);
|
|
if (stored === 'light' || stored === 'dark') {
|
|
return stored;
|
|
}
|
|
// Detect OS preference on first visit
|
|
if (window.matchMedia?.('(prefers-color-scheme: light)').matches) {
|
|
return 'light';
|
|
}
|
|
return 'dark';
|
|
}
|
|
|
|
export function setTheme(theme: Theme): void {
|
|
if (typeof window === 'undefined') return;
|
|
localStorage.setItem(THEME_KEY, theme);
|
|
applyTheme(theme);
|
|
}
|
|
|
|
export function toggleTheme(): Theme {
|
|
const current = getTheme();
|
|
const next = current === 'dark' ? 'light' : 'dark';
|
|
setTheme(next);
|
|
return next;
|
|
}
|
|
|
|
export function applyTheme(theme: Theme): void {
|
|
if (typeof document === 'undefined') return;
|
|
const html = document.documentElement;
|
|
|
|
// Remove both classes first
|
|
html.classList.remove('light', 'dark');
|
|
// Add the correct class
|
|
html.classList.add(theme);
|
|
}
|
|
|
|
// Initialize theme on page load
|
|
export function initTheme(): void {
|
|
if (typeof window === 'undefined') return;
|
|
const theme = getTheme();
|
|
applyTheme(theme);
|
|
}
|