50 lines
1.5 KiB
JavaScript
50 lines
1.5 KiB
JavaScript
const wordmark = document.getElementById('wordmark');
|
|
if (wordmark) {
|
|
document.addEventListener('mousemove', (e) => {
|
|
const cx = window.innerWidth / 2;
|
|
const cy = window.innerHeight / 2;
|
|
const dx = (e.clientX - cx) / cx;
|
|
const dy = (e.clientY - cy) / cy;
|
|
wordmark.style.transform = `perspective(800px) rotateX(${-dy * 5}deg) rotateY(${dx * 5}deg)`;
|
|
});
|
|
document.addEventListener('mouseleave', () => {
|
|
wordmark.style.transform = '';
|
|
});
|
|
}
|
|
|
|
const THEME_KEY = 'theme';
|
|
const themeToggle = document.querySelector('.theme-toggle');
|
|
|
|
function setTheme(theme) {
|
|
document.documentElement.setAttribute('data-theme', theme);
|
|
if (themeToggle) {
|
|
themeToggle.setAttribute('aria-pressed', theme === 'dark' ? 'true' : 'false');
|
|
themeToggle.innerHTML = theme === 'dark'
|
|
? '<i class="fa-solid fa-sun"></i>'
|
|
: '<i class="fa-solid fa-moon"></i>';
|
|
}
|
|
}
|
|
|
|
function initTheme() {
|
|
const savedTheme = localStorage.getItem(THEME_KEY);
|
|
if (savedTheme) {
|
|
setTheme(savedTheme);
|
|
return;
|
|
}
|
|
|
|
const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
setTheme(prefersDark ? 'dark' : 'light');
|
|
}
|
|
|
|
if (themeToggle) {
|
|
initTheme();
|
|
themeToggle.addEventListener('click', () => {
|
|
const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
|
|
const nextTheme = isDark ? 'light' : 'dark';
|
|
setTheme(nextTheme);
|
|
localStorage.setItem(THEME_KEY, nextTheme);
|
|
});
|
|
} else {
|
|
initTheme();
|
|
}
|