Zamok_V228/js/theme.js

/* Apply the palette before paint; keep the control and browser chrome in sync. */
(() => {
  const systemTheme = matchMedia('(prefers-color-scheme: dark)');
  let selectedTheme;
  try { selectedTheme = localStorage.getItem('zke-theme'); } catch { /* Use system preference. */ }
  const isTheme = value => value === 'light' || value === 'dark';
  function applyTheme(theme) {
    document.documentElement.dataset.theme = theme;
    document.querySelector('meta[name="theme-color"]').content = theme === 'dark' ? '#171a18' : '#f4f4ef';
    const button = document.querySelector('#themeButton');
    if (!button) return;
    const label = theme === 'dark' ? 'Включить светлую тему' : 'Включить тёмную тему';
    button.setAttribute('aria-label', label);
    button.setAttribute('title', label);
    button.setAttribute('aria-pressed', String(theme === 'dark'));
  }
  applyTheme(isTheme(selectedTheme) ? selectedTheme : systemTheme.matches ? 'dark' : 'light');
  document.addEventListener('DOMContentLoaded', () => {
    applyTheme(document.documentElement.dataset.theme);
    document.querySelector('#themeButton').addEventListener('click', () => {
      selectedTheme = document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark';
      applyTheme(selectedTheme);
      try { localStorage.setItem('zke-theme', selectedTheme); } catch { /* Theme remains active for this session. */ }
    });
  });
  systemTheme.addEventListener('change', event => {
    if (!isTheme(selectedTheme)) applyTheme(event.matches ? 'dark' : 'light');
  });
})();