@kaifronsdal/transcript-viewer/src/lib/shared/theme.ts

A web-based viewer for AI conversation transcripts with rollback support

import { writable } from 'svelte/store';
import { browser } from '$app/environment';

// Create a writable store for theme state
export const isDarkMode = writable(false);

// Reactive theme string for JsonViewer
export const themeString = writable('light');

// Function to initialize theme from localStorage and system preference
export function initializeTheme() {
	if (!browser) return;
	
	const saved = localStorage.getItem('theme');
	let initialDark = false;
	
	if (saved) {
		initialDark = saved === 'dark';
	} else {
		// Use system preference as default
		initialDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
	}
	
	isDarkMode.set(initialDark);
	themeString.set(initialDark ? 'dark' : 'light');
	applyTheme(initialDark);
	
	// Set up subscriptions only after initialization
	setupSubscriptions();
}

// Function to apply theme to document
export function applyTheme(dark: boolean) {
	if (!browser) return;
	
	const theme = dark ? 'dark' : 'light';
	document.documentElement.setAttribute('data-theme', theme);
	
	// Also add/remove dark class for Tailwind compatibility
	if (dark) {
		document.documentElement.classList.add('dark');
	} else {
		document.documentElement.classList.remove('dark');
	}
	
	localStorage.setItem('theme', theme);
}

// Function to toggle theme
export function toggleTheme() {
	isDarkMode.update(dark => {
		const newDark = !dark;
		applyTheme(newDark);
		themeString.set(newDark ? 'dark' : 'light');
		return newDark;
	});
}

// Set up subscriptions (only called from browser)
let subscriptionsSetup = false;
function setupSubscriptions() {
	if (subscriptionsSetup) return;
	subscriptionsSetup = true;
	
	// Subscribe to isDarkMode changes and update themeString
	isDarkMode.subscribe(dark => {
		themeString.set(dark ? 'dark' : 'light');
	});
}