easy-png-tools2/web/src/lib/theme.svelte.ts

export type ThemeChoice = 'light' | 'dark';

const STORAGE_KEY = 'theme';

let theme = $state<ThemeChoice>('light');

function storage(): Storage | null {
	return typeof localStorage === 'undefined' ? null : localStorage;
}

function systemTheme(): ThemeChoice {
	if (typeof window === 'undefined' || !window.matchMedia) return 'light';
	return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}

function apply(): void {
	if (typeof document === 'undefined') return;
	document.documentElement.dataset.theme = theme;
}

export function getTheme(): ThemeChoice {
	return theme;
}

export function setTheme(next: ThemeChoice): void {
	theme = next;
	storage()?.setItem(STORAGE_KEY, next);
	apply();
}

/**
 * Догоняет состояние после гидрации: фактический атрибут уже выставлен
 * инлайн-скриптом в app.html; здесь он читается и синхронизируется с runes,
 * чтобы кнопка в шапке отражала реальную тему.
 */
export function initTheme(): void {
	if (typeof window === 'undefined') return;
	const attr = typeof document !== 'undefined' ? document.documentElement.dataset.theme : undefined;
	theme = attr === 'dark' || attr === 'light' ? attr : systemTheme();
	apply();
}