// Shared navigation component - loaded automatically by other pages
if (!document.querySelector('.logo')) {
document.head.innerHTML += `
`;
document.body.innerHTML = `
` + document.body.innerHTML;
// Theme management functions
function initTheme() {
const savedTheme = localStorage.getItem('theme');
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const theme = savedTheme || (systemPrefersDark ? 'dark' : 'light');
setTheme(theme);
// Listen for system theme changes
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
if (!localStorage.getItem('theme')) {
setTheme(e.matches ? 'dark' : 'light');
}
});
}
function setTheme(theme) {
const html = document.documentElement;
const themeIcon = document.querySelector('.theme-icon');
if (theme === 'light') {
html.setAttribute('data-theme', 'light');
if (themeIcon) themeIcon.textContent = '☀️';
} else {
html.removeAttribute('data-theme');
if (themeIcon) themeIcon.textContent = '🌙';
}
}
function toggleTheme() {
const html = document.documentElement;
const currentTheme = html.getAttribute('data-theme') === 'light' ? 'light' : 'dark';
const newTheme = currentTheme === 'light' ? 'dark' : 'light';
setTheme(newTheme);
localStorage.setItem('theme', newTheme);
window.dispatchEvent(new Event('themeChanged'));
}
// Initialize theme
initTheme();
// Theme toggle button handler
document.getElementById('theme-toggle')?.addEventListener('click', toggleTheme);
}