Theme Switcher for SvelteKit

@import tailwindcss;

@plugin "daisyui";

/* Custom dark theme with brand colors */
@plugin "daisyui/theme" {
	name: "black";
	default: false;
	prefersdark: true;
	color-scheme: dark;

	--color-primary: oklch(48.38% 0.2633 287.85);
	--color-secondary: oklch(72.67% 0.1872 308.45);
	--color-secondary-content: oklch(0% 0 0);
	--color-error: oklch(50.54% 0.1905 27.52);
	--color-error-content: oklch(100% 0 0);
	--radius-field: 0.5rem;
	--radius-box: 0.5rem;
	--radius-selector: 0.5rem;
}

/* Default light theme with customizations */
@plugin "daisyui/theme" {
	name: "light";
	default: true;
	prefersdark: false;
	color-scheme: light;

	--color-primary: oklch(52.26% 0.2175 262.65);
	--color-secondary: oklch(56.59% 0.238 265.11);
	--color-accent: oklch(52.78% 0 0);
}

/* Additional theme variations */
@plugin "daisyui/theme" {
	name: "dark";
	default: false;
	prefersdark: false;
	color-scheme: dark;

	--color-secondary: oklch(62.5% 0.241 354.308);
}

@plugin "daisyui/theme" {
	name: "night";
	default: false;
	prefersdark: false;
	color-scheme: dark;
}

@plugin "daisyui/theme" {
	name: "halloween";
	default: false;
	prefersdark: false;
	color-scheme: dark;

	--color-secondary: oklch(58.8664% 0.104092 60.664655);
	--color-secondary-content: oklch(100% 0 0);
	--color-error: oklch(57.56% 0.1894 37.76);
	--color-error-content: oklch(100% 0 0);
}

@plugin "daisyui/theme" {
	name: "retro";
	default: false;
	prefersdark: false;
	color-scheme: light;

	--color-secondary: oklch(64.38% 0.2633 287.85);
	--color-secondary-content: oklch(100% 0 0);
}

@plugin "daisyui/theme" {
	name: "valentine";
	default: false;
	prefersdark: false;
	color-scheme: light;

	--color-secondary: oklch(48.38% 0.2633 287.85);
}

@plugin "daisyui/theme" {
	name: "garden";
	default: false;
	prefersdark: false;
	color-scheme: light;
}

import { browser } from "$app/environment";
import { getRequestEvent } from "$app/server";
import Cookie from "js-cookie";
import * as v from "valibot";

/**
 * Set a cookie from the browser using `js-cookie`.
 * This function only works in the browser environment and automatically
 * serializes complex objects to JSON.
 *
 * @param name Name of the cookie
 * @param schema Valibot schema for type validation
 * @param value Value to store in the cookie
 * @param expires Expiration time in milliseconds (default: 1 year)
 */
export function setCookie<TSchema extends v.BaseSchema<any, any, any>>(
	name: string,
	schema: TSchema,
	value: v.InferInput<TSchema>,
	expires = 1000 * 60 * 60 * 24 * 365
) {
	if (!browser) return value;
	if (typeof value === "undefined") throw new Error("Value is undefined");

	const parsed = v.parse(schema, value);
	Cookie.set(name, typeof parsed !== "string" ? JSON.stringify(parsed) : parsed, {
		path: "/",
		expires: new Date(Date.now() + expires)
	});

	return value;
}

/**
 * Get a cookie value from the server during SSR.
 * Falls back to setting a default value if the cookie doesn't exist
 * or contains invalid data.
 *
 * @param name Name of the cookie to retrieve
 * @param schema Valibot schema for validation and default values
 * @returns Parsed and validated cookie value
 */
export function serverGetCookie<TSchema extends v.BaseSchema<any, any, any>>(name: string, schema: TSchema) {
	try {
		const event = getRequestEvent();
		if (!event) throw new Error("No event");

		const val = event.cookies.get(name);
		const cookie = val && val !== "undefined" ? JSON.parse(val) : serverSetCookie(name, schema, undefined);

		return v.parse(schema, cookie);
	} catch (err) {
		console.error(err);
		return serverSetCookie(name, schema, undefined);
	}
}

/**
 * Set a cookie from the server during SSR.
 * Supports both regular and HTTP-only cookies for enhanced security.
 *
 * @param name Name of the cookie
 * @param schema Valibot schema for validation
 * @param value Value to store
 * @param options Cookie configuration options
 * @param options.expires Expiration time in milliseconds
 * @param options.httpOnly Whether cookie should be HTTP-only (inaccessible to JavaScript)
 * @returns Parsed and validated cookie value
 */
export function serverSetCookie<TSchema extends v.BaseSchema<any, any, any>>(
	name: string,
	schema: TSchema,
	value: v.InferInput<TSchema>,
	options?: {
		expires?: number;
		httpOnly?: boolean;
	}
) {
	const opts = {
		expires: 1000 * 60 * 60 * 24 * 365,
		httpOnly: false,
		...options
	};

	const event = getRequestEvent();
	if (!event) throw new Error("No event");

	const parsed = v.parse(schema, value);
	event.cookies.set(name, JSON.stringify(parsed), {
		path: "/",
		expires: new Date(Date.now() + opts.expires),
		httpOnly: opts.httpOnly
	});

	return parsed;
}

import * as v from "valibot";
import { themes, themeGroups } from "$lib/constants";

/**
 * Main application cookie schema that stores user preferences.
 * Uses optional fields with sensible defaults to handle partial data gracefully.
 */
export type AppCookie = v.InferOutput<typeof appCookieSchema>;
export const appCookieSchema = v.optional(
	v.object({
		settings: v.optional(
			v.object({
				// Theme can be any defined theme or "system" for auto-detection
				theme: v.optional(v.picklist(themes.map((t) => t.value)), "system"),
				// Mode tracks the resolved light/dark preference
				mode: v.optional(v.picklist(themeGroups), "dark")
			}),
			{}
		)
	}),
	{}
);

// Default values parsed through the schema for consistency
export const appDefaults = v.parse(appCookieSchema, {});

/**
 * Theme configuration with metadata for grouping and system preference detection
 */
type Theme = {
	name: string;        // Display name for UI
	value: string;       // CSS theme identifier
	group?: (typeof themeGroups)[number]; // Light or dark classification
};

// Core theme categories for system preference detection
export const themeGroups = ["dark", "light"] as const;

/**
 * Complete theme definitions including system theme for auto-detection.
 * Themes are grouped by light/dark for easier organization in UI components.
 */
export const themes = [
	{
		name: "System",     // Automatically detects user's OS preference
		value: "system"
	},
	// Light themes
	{
		name: "Light",
		value: "light",
		group: "light"
	},
	{
		name: "Retro",
		value: "retro",
		group: "light"
	},
	{
		name: "Valentine",
		value: "valentine",
		group: "light"
	},
	{
		name: "Garden",
		value: "garden",
		group: "light"
	},
	// Dark themes
	{
		name: "Dark",
		value: "dark",
		group: "dark"
	},
	{
		name: "Black",
		value: "black",
		group: "dark"
	},
	{
		name: "Halloween",
		value: "halloween",
		group: "dark"
	},
	{
		name: "Night",
		value: "night",
		group: "dark"
	}
] as const satisfies Theme[];

// Type exports for use throughout the application
export type Themes = (typeof themes)[number]["value"];
export type ThemeGroups = (typeof themeGroups)[number];

import { getContext, setContext } from "svelte";
import { setCookie } from "$server/cookie";
import { appCookieSchema, appDefaults, type AppCookie } from "$lib/schemas";

/**
 * Global application state store using Svelte 5 runes.
 * Automatically persists changes to cookies and provides reactive updates.
 */
class Global {
	_app: AppCookie = $state(appDefaults);

	constructor(app: AppCookie) {
		this._app = app;

		// Automatically sync state changes to cookies
		$effect(() => {
			setCookie("app", appCookieSchema, this._app);
		});
	}

	get app() {
		return this._app;
	}
	set app(value: AppCookie) {
		this._app = value;
	}
}

const globalKey = Symbol();

/**
 * Retrieve the global context store instance.
 * Must be called within a component that has access to the context.
 */
export function getGlobal() {
	return getContext<Global>(globalKey);
}

/**
 * Create and register the global context store.
 * Should be called once in your root layout component.
 */
export function createGlobal(app: AppCookie) {
	const global = new Global(app);
	return setContext(globalKey, global);
}

import { serverGetCookie } from "$server/cookie.js";
import { appCookieSchema } from "$lib/schemas";

export const load = async (event) => {
  // Retrieve existing cookie or create with default values
	const app = serverGetCookie("app", appCookieSchema);

  return { app };
};

<script lang="ts">
	import { createGlobal } from "$lib/stores.svelte";

	const { data } = $props();

	createGlobal(data.app);
</script>

<!-- Your app content goes here -->
<slot />

<script lang="ts">
	import { themeGroups, themes } from "$lib/constants";
	import { getGlobal } from "$lib/stores.svelte";
	import { MediaQuery } from "svelte/reactivity";

	// Access the global context store
	const global = getGlobal();

	// Local reactive state for the theme selector
	let theme = $state(global.app.settings.theme);
	
	// Monitor system dark mode preference
	const mq = new MediaQuery("(prefers-color-scheme: dark)");
	
	/**
	 * Compute the effective mode (light/dark) based on:
	 * 1. If "system" is selected, use the system preference
	 * 2. Otherwise, use the theme's defined group
	 * 3. Fall back to the stored mode preference
	 */
	const mode = $derived.by(() => {
		const selected = themes.find((t) => t.value === theme);
		if (selected) {
			if (selected.value === "system") {
				return mq.current ? "dark" : "light";
			} else {
				return selected.group;
			}
		}
		return global.app.settings.mode;
	});

	/**
	 * Apply theme changes to both the global store and the DOM.
	 * This effect runs whenever theme or mode changes.
	 */
	$effect(() => {
		if (theme !== global.app.settings.theme || mode !== global.app.settings.mode) {
			// Update the global store (which triggers cookie persistence)
			global.app.settings.theme = theme;
			global.app.settings.mode = mode;
			
			// Apply changes to the DOM for immediate visual feedback
			const opposite = mode === "dark" ? "light" : "dark";
			document.documentElement.classList.replace(opposite, mode);
			document.documentElement.dataset.theme = theme;
		}
	});
</script>

<!-- Theme selector dropdown with grouped options -->
<select class="select select-bordered select-sm flex-1 leading-4" bind:value={theme}>
	<option value="system" selected={global.app.settings.theme === "system"}>System</option>
	{#each themeGroups as group}
		<hr />
		{#each themes.filter((t) => "group" in t && t.group === group) as theme}
			<option value={theme.value} selected={global.app.settings.theme === theme.value}>
				{theme.name}
			</option>
		{/each}
	{/each}
</select>

<!doctype html>
<html lang="en" %theme%>
	<head>
		<meta charset="utf-8" />
		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
		<link rel="manifest" href="/manifest.json" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		%sveltekit.head%
	</head>
	<body data-sveltekit-preload-data="hover" data-sveltekit-preload-code="eager">
		<div style="display: contents">%sveltekit.body%</div>
	</body>
</html>

import { type Handle } from "@sveltejs/kit";
import { serverGetCookie } from "$server/cookie.js";
import { appCookieSchema } from "$lib/schemas";

/**
 * Server hook that preloads theme information into the HTML document.
 * This prevents FOUC by ensuring the correct theme is applied before
 * any client-side JavaScript executes.
 */
const preloadTheme: Handle = async ({ event, resolve }) => {
	// Load user's theme preferences from cookies
	const app = serverGetCookie("app", appCookieSchema);
	const mode = app.settings.mode;
	
	// Use specific theme for app routes, fallback to mode for others
	const theme = event.route.id?.startsWith("/(app)") ? app.settings.theme : app.settings.mode;

	return await resolve(event, {
		transformPageChunk: ({ html }) => {
			// Replace the %theme% placeholder with actual theme classes
			return html.replace(/%theme%/g, `class="${mode}" data-theme="${theme}"`);
		}
	});
};

export const handle = sequence(preloadTheme);