64 lines
2.1 KiB
JavaScript
64 lines
2.1 KiB
JavaScript
const demoThemeStorageKey = 'site-theme';
|
|
const legacyDemoThemeStorageKey = 'cv-theme';
|
|
|
|
function normalizeDemoTheme(theme) {
|
|
return theme === 'light' || theme === 'fancy' ? 'light' : 'dark';
|
|
}
|
|
|
|
function getStoredDemoTheme() {
|
|
try {
|
|
return localStorage.getItem(demoThemeStorageKey) || localStorage.getItem(legacyDemoThemeStorageKey);
|
|
} catch (_error) {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
function storeDemoTheme(theme) {
|
|
const nextTheme = normalizeDemoTheme(theme);
|
|
try {
|
|
localStorage.setItem(demoThemeStorageKey, nextTheme);
|
|
localStorage.removeItem(legacyDemoThemeStorageKey);
|
|
} catch (_error) {
|
|
}
|
|
}
|
|
|
|
function getDemoThemeButtons() {
|
|
return [...document.querySelectorAll('[data-site-theme]')];
|
|
}
|
|
|
|
function setDemoTheme(theme) {
|
|
const nextTheme = normalizeDemoTheme(theme);
|
|
document.documentElement.classList.toggle('theme-light', nextTheme === 'light');
|
|
document.documentElement.classList.toggle('theme-dark', nextTheme === 'dark');
|
|
document.body.classList.toggle('theme-light', nextTheme === 'light');
|
|
document.body.classList.toggle('theme-dark', nextTheme === 'dark');
|
|
|
|
getDemoThemeButtons().forEach((button) => {
|
|
const active = normalizeDemoTheme(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);
|
|
}
|
|
|
|
document.addEventListener('click', (event) => {
|
|
const button = event.target.closest('[data-site-theme]');
|
|
if (!button) return;
|
|
setDemoTheme(button.dataset.siteTheme);
|
|
});
|
|
|
|
installDemoThemeToolbar();
|
|
setDemoTheme(getStoredDemoTheme() || 'dark');
|