55 lines
1.7 KiB
JavaScript
55 lines
1.7 KiB
JavaScript
const demoThemeButtons = [];
|
|
const demoThemeStorageKey = 'site-theme';
|
|
|
|
function normalizeDemoTheme(theme) {
|
|
return theme === 'light' ? 'light' : 'dark';
|
|
}
|
|
|
|
function getStoredDemoTheme() {
|
|
try {
|
|
return localStorage.getItem(demoThemeStorageKey);
|
|
} catch (_error) {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
function storeDemoTheme(theme) {
|
|
try {
|
|
localStorage.setItem(demoThemeStorageKey, theme);
|
|
} catch (_error) {
|
|
}
|
|
}
|
|
|
|
function setDemoTheme(theme) {
|
|
const nextTheme = normalizeDemoTheme(theme);
|
|
document.body.classList.toggle('theme-light', nextTheme === 'light');
|
|
document.body.classList.toggle('theme-dark', nextTheme === 'dark');
|
|
|
|
demoThemeButtons.forEach((button) => {
|
|
const active = button.dataset.siteTheme === nextTheme;
|
|
button.classList.toggle('is-active', active);
|
|
button.setAttribute('aria-pressed', active ? 'true' : 'false');
|
|
});
|
|
|
|
storeDemoTheme(nextTheme);
|
|
}
|
|
|
|
function installDemoThemeToolbar() {
|
|
const nav = document.querySelector('.topline');
|
|
if (!nav) return;
|
|
|
|
const toolbar = document.createElement('div');
|
|
toolbar.className = 'site-theme-toolbar';
|
|
toolbar.setAttribute('aria-label', 'Theme');
|
|
toolbar.innerHTML = '<span>Theme</span><button type="button" class="site-theme-option" data-site-theme="dark">Dark</button><span class="site-theme-separator" aria-hidden="true">|</span><button type="button" class="site-theme-option" data-site-theme="light">Light</button>';
|
|
nav.appendChild(toolbar);
|
|
|
|
demoThemeButtons.push(...toolbar.querySelectorAll('[data-site-theme]'));
|
|
demoThemeButtons.forEach((button) => {
|
|
button.addEventListener('click', () => setDemoTheme(button.dataset.siteTheme));
|
|
});
|
|
}
|
|
|
|
installDemoThemeToolbar();
|
|
setDemoTheme(getStoredDemoTheme() || 'dark');
|