1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
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);
}
|