script.js

(function () {
  const root = document.documentElement;
  const year = document.getElementById('year');
  if (year) year.textContent = new Date().getFullYear();

  function getSystemTheme() {
    return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
  }

  function applyTheme(theme) {
    if (theme === 'system') {
      root.dataset.theme = getSystemTheme();
    } else {
      root.dataset.theme = theme;
    }
    updateThemeIcon();
  }

  function toggleTheme() {
    const current = root.dataset.theme || 'system';
    const next = current === 'light' ? 'dark' : current === 'dark' ? 'system' : 'light';
    localStorage.setItem('theme', next);
    applyTheme(next);
  }

  function updateThemeIcon() {
    const t = root.dataset.theme || 'system';
    const icon = t === 'dark' ? '🌙' : t === 'light' ? '☀️' : '🖥️';
    const el = document.getElementById('theme-icon');
    if (el) el.textContent = icon;
  }

  function initTheme() {
    const saved = localStorage.getItem('theme') || 'system';
    root.dataset.theme = saved;
    applyTheme(saved);
  }

  document.addEventListener('click', function (e) {
    if (e.target.closest('#theme-toggle')) {
      toggleTheme();
    }
  });

  // Keep system theme in sync if user hasn't fixed a preference
  window.matchMedia('(prefers-color-scheme: dark)').addEventListener?.('change', () => {
    const stored = localStorage.getItem('theme') || 'system';
    if (stored === 'system') applyTheme('system');
  });

  initTheme();
})();