68 lines
2.4 KiB
JavaScript
68 lines
2.4 KiB
JavaScript
/**
|
|
* static/js/theme.js
|
|
* Dark / light theme toggle.
|
|
* - Defaults to the OS/browser colour-scheme preference.
|
|
* - User override is persisted in localStorage.
|
|
* - Applies via <html data-theme="dark|light">.
|
|
*/
|
|
|
|
const STORAGE_KEY = 'local-mcp-theme';
|
|
|
|
function systemTheme() {
|
|
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|
}
|
|
|
|
function storedTheme() {
|
|
return localStorage.getItem(STORAGE_KEY); // 'dark' | 'light' | null
|
|
}
|
|
|
|
function iconSun() {
|
|
return `<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="5"/>
|
|
<line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/>
|
|
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
|
|
<line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/>
|
|
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
|
|
</svg>`;
|
|
}
|
|
|
|
function iconMoon() {
|
|
return `<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
|
|
</svg>`;
|
|
}
|
|
|
|
function applyTheme(theme) {
|
|
document.documentElement.dataset.theme = theme;
|
|
|
|
const btn = document.getElementById('theme-toggle');
|
|
if (!btn) return;
|
|
const isDark = theme === 'dark';
|
|
btn.setAttribute('aria-label', isDark ? 'Switch to light mode' : 'Switch to dark mode');
|
|
btn.setAttribute('title', isDark ? 'Switch to light mode' : 'Switch to dark mode');
|
|
btn.innerHTML = isDark ? iconMoon() : iconSun();
|
|
}
|
|
|
|
function toggle() {
|
|
const current = document.documentElement.dataset.theme || 'dark';
|
|
const next = current === 'dark' ? 'light' : 'dark';
|
|
localStorage.setItem(STORAGE_KEY, next);
|
|
applyTheme(next);
|
|
}
|
|
|
|
export function initTheme() {
|
|
// Apply immediately (before paint) based on stored or system preference
|
|
const theme = storedTheme() || systemTheme();
|
|
applyTheme(theme);
|
|
|
|
// Follow system changes only when the user hasn't manually overridden
|
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
|
|
if (!storedTheme()) {
|
|
applyTheme(e.matches ? 'dark' : 'light');
|
|
}
|
|
});
|
|
|
|
document.getElementById('theme-toggle')?.addEventListener('click', toggle);
|
|
}
|
|
|