62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
import { THEMES, DEFAULT_THEME_ID } from "@/lib/themes";
|
|
import { CSS_PROPS } from "@/lib/themes/props";
|
|
import type { Theme } from "@/lib/themes/types";
|
|
|
|
export function getStoredThemeId(): string {
|
|
if (typeof window === "undefined") return DEFAULT_THEME_ID;
|
|
return localStorage.getItem("theme") || DEFAULT_THEME_ID;
|
|
}
|
|
|
|
export function saveTheme(id: string): void {
|
|
localStorage.setItem("theme", id);
|
|
}
|
|
|
|
export function getNextTheme(currentId: string): Theme {
|
|
const list = Object.values(THEMES);
|
|
const idx = list.findIndex((t) => t.id === currentId);
|
|
return list[(idx + 1) % list.length];
|
|
}
|
|
|
|
/** Sets CSS vars and notifies canvas, but does NOT persist to localStorage. */
|
|
export function previewTheme(id: string): void {
|
|
const theme = THEMES[id];
|
|
if (!theme) return;
|
|
|
|
const root = document.documentElement;
|
|
for (const [key, prop] of CSS_PROPS) {
|
|
root.style.setProperty(prop, theme.colors[key]);
|
|
}
|
|
|
|
|
|
document.dispatchEvent(new CustomEvent("theme-changed", { detail: { id } }));
|
|
}
|
|
|
|
export function applyTheme(id: string): void {
|
|
const theme = THEMES[id];
|
|
if (!theme) return;
|
|
|
|
// Set CSS vars on :root for immediate visual update
|
|
const root = document.documentElement;
|
|
for (const [key, prop] of CSS_PROPS) {
|
|
root.style.setProperty(prop, theme.colors[key]);
|
|
}
|
|
|
|
// Update <style id="theme-vars"> so Astro view transitions don't revert
|
|
let el = document.getElementById("theme-vars") as HTMLStyleElement | null;
|
|
if (!el) {
|
|
el = document.createElement("style");
|
|
el.id = "theme-vars";
|
|
document.head.appendChild(el);
|
|
}
|
|
let css = ":root{";
|
|
for (const [key, prop] of CSS_PROPS) {
|
|
css += `${prop}:${theme.colors[key]};`;
|
|
}
|
|
css += "}";
|
|
el.textContent = css;
|
|
|
|
saveTheme(id);
|
|
|
|
document.dispatchEvent(new CustomEvent("theme-changed", { detail: { id } }));
|
|
}
|