1 files changed, 66 insertions, 0 deletions
diff --git a/web/src/theme.js b/web/src/theme.js
new file mode 100644
index 0000000..686572b
--- /dev/null
+++ b/web/src/theme.js
@@ -0,0 +1,66 @@
+export const Theme = { Light: 'light', Dark: 'dark' };
+
+// Full theme catalog for the gallery. Light/Dark stay the two the corner
+// toggle button cycles between; the rest are only reachable from the
+// gallery, matching how most typing sites treat "light vs dark" as the
+// quick switch and everything else as a deliberate pick.
+export const THEMES = [
+    { id: 'dark', label: 'Dark', dark: true, primary: '#00ff9d' },
+    { id: 'light', label: 'Light', dark: false, primary: '#067a4e' },
+    { id: 'dracula', label: 'Dracula', dark: true, primary: '#bd93f9' },
+    { id: 'nord', label: 'Nord', dark: true, primary: '#88c0d0' },
+    { id: 'solarized', label: 'Solarized', dark: true, primary: '#268bd2' },
+    { id: 'gruvbox', label: 'Gruvbox', dark: true, primary: '#fabd2f' },
+    { id: 'monokai', label: 'Monokai', dark: true, primary: '#a6e22e' },
+];
+
+export function isDarkTheme(id) {
+    return THEMES.find(t => t.id === id)?.dark ?? true;
+}
+
+const STORAGE_KEY = 'theme';
+const listeners = new Set();
+
+let theme = localStorage.getItem(STORAGE_KEY) || Theme.Dark;
+
+// The custom cursor is a per-theme accent, not a fixed brand mark - a
+// hardcoded color would sit oddly on Dracula/Nord/etc, so it's regenerated
+// from each theme's own primary color instead. Plus-reticle crosshair, not a
+// circle - the rest of the UI (buttons, icons.js's angular sun/moon) is all
+// sharp corners, and a round cursor read as off-brand next to it. The gap at
+// the center (arms don't meet) is what makes it read as a scope reticle
+// rather than a plain plus sign.
+function cursorDataUri(color) {
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M10 1V8 M10 12V19 M1 10H8 M12 10H19" stroke="${color}" stroke-width="1.6"/><rect x="9.3" y="9.3" width="1.4" height="1.4" fill="${color}"/></svg>`;
+    return `url("data:image/svg+xml;base64,${btoa(svg)}") 10 10, auto`;
+}
+
+function apply(value) {
+    document.documentElement.setAttribute('data-theme', value);
+    if (document.body) {
+        const t = THEMES.find(x => x.id === value);
+        document.body.style.cursor = cursorDataUri(t ? t.primary : '#00ff9d');
+    }
+}
+apply(theme);
+
+export function getTheme() {
+    return theme;
+}
+
+export function setTheme(id) {
+    if (!THEMES.some(t => t.id === id)) return;
+    theme = id;
+    localStorage.setItem(STORAGE_KEY, theme);
+    apply(theme);
+    for (const fn of listeners) fn(theme);
+}
+
+export function toggleTheme() {
+    setTheme(theme === Theme.Light ? Theme.Dark : Theme.Light);
+}
+
+export function onThemeChange(fn) {
+    listeners.add(fn);
+    return () => listeners.delete(fn);
+}