57 lines
1.8 KiB
JavaScript
57 lines
1.8 KiB
JavaScript
const siteThemeButtons = [...document.querySelectorAll('[data-site-theme]')];
|
|
const cvPortrait = document.getElementById('cv-portrait-orbit');
|
|
const siteThemeStorageKey = 'site-theme';
|
|
const legacyCvThemeStorageKey = 'cv-theme';
|
|
|
|
function normalizeSiteTheme(theme) {
|
|
return theme === 'light' || theme === 'fancy' ? 'light' : 'dark';
|
|
}
|
|
|
|
function getStoredSiteTheme() {
|
|
try {
|
|
return localStorage.getItem(siteThemeStorageKey) || localStorage.getItem(legacyCvThemeStorageKey);
|
|
} catch (_error) {
|
|
return null;
|
|
}
|
|
}
|
|
|
|
function storeSiteTheme(theme) {
|
|
try {
|
|
localStorage.setItem(siteThemeStorageKey, theme);
|
|
localStorage.removeItem(legacyCvThemeStorageKey);
|
|
} catch (_error) {
|
|
}
|
|
}
|
|
|
|
function setSiteTheme(theme) {
|
|
const nextTheme = normalizeSiteTheme(theme);
|
|
document.body.classList.toggle('theme-light', nextTheme === 'light');
|
|
document.body.classList.toggle('theme-dark', nextTheme === 'dark');
|
|
|
|
siteThemeButtons.forEach((button) => {
|
|
const active = button.dataset.siteTheme === nextTheme;
|
|
button.classList.toggle('is-active', active);
|
|
button.setAttribute('aria-pressed', active ? 'true' : 'false');
|
|
});
|
|
|
|
storeSiteTheme(nextTheme);
|
|
}
|
|
|
|
siteThemeButtons.forEach((button) => {
|
|
button.addEventListener('click', () => setSiteTheme(button.dataset.siteTheme));
|
|
});
|
|
|
|
document.addEventListener('pointermove', (event) => {
|
|
if (!document.body.classList.contains('theme-light') || !cvPortrait) return;
|
|
|
|
const bounds = cvPortrait.getBoundingClientRect();
|
|
const centerX = bounds.left + bounds.width / 2;
|
|
const centerY = bounds.top + bounds.height / 2;
|
|
const radians = Math.atan2(event.clientY - centerY, event.clientX - centerX);
|
|
const degrees = radians * 180 / Math.PI;
|
|
|
|
cvPortrait.style.setProperty('--portrait-rotation', `${degrees + 8}deg`);
|
|
});
|
|
|
|
setSiteTheme(getStoredSiteTheme() || 'dark');
|