`public/page-theme.js`

34 lines
/* Shared page-theme toggle wiring (Steve 2026-06-01). Loaded with `defer` on every
   page. The render-blocking FOUC guard (inline <head> script) already set
   data-page-theme / data-theme-preview before paint; this only injects + wires the
   toggle UI, which is CSS-hidden until preview mode, so late injection never flashes.
   Reads/writes localStorage('wallco-page-theme') — same key as wallco.ai. */
(function(){
  var bar = document.createElement('div');
  bar.id = 'page-theme-toggle';
  bar.setAttribute('role','group');
  bar.setAttribute('aria-label','Page theme');
  bar.innerHTML =
    '<button type="button" data-theme="theme1" aria-pressed="false">Theme 1</button>' +
    '<button type="button" data-theme="theme2" aria-pressed="false">Theme 2</button>';
  document.body.appendChild(bar);

  var cur = document.documentElement.getAttribute('data-page-theme') || 'theme1';
  var btns = bar.querySelectorAll('button');
  function sync(t){ btns.forEach(function(b){ b.setAttribute('aria-pressed', b.dataset.theme === t ? 'true' : 'false'); }); }
  sync(cur);

  btns.forEach(function(b){
    b.addEventListener('click', function(){
      var t = b.dataset.theme;
      var de = document.documentElement;
      de.setAttribute('data-page-theme', t);
      // Clicking the toggle is an explicit opt-in → keep it visible (sticky) so the
      // user can switch back; otherwise picking Theme 1 would hide the control.
      de.setAttribute('data-theme-preview','on');
      try { localStorage.setItem('wallco-page-theme', t); } catch(e){}
      sync(t);
    });
  });
})();