Dark Mode Toggle

<style>
  /* ─── Theme Custom Properties ─── */
  :root {
    --sq-bg: #ffffff;
    --sq-text: #1a1a1a;
    --sq-accent: #0070f3;
  }
  [data-theme="dark"] {
    --sq-bg: #121212;
    --sq-text: #e8e8e8;
    --sq-accent: #58a6ff;
  }

  /* ─── Apply Theme ─── */
  body {
    background-color: var(--sq-bg) !important;
    color: var(--sq-text) !important;
    transition: background-color 0.3s ease, color 0.3s ease;
  }
  /* Extend to common Squarespace elements */
  .page-section,
  .content-wrapper,
  .Index-page-content {
    background-color: var(--sq-bg) !important;
    color: var(--sq-text) !important;
  }
  h1, h2, h3, h4, h5, h6, p, li, span, a {
    color: var(--sq-text) !important;
    transition: color 0.3s ease;
  }
  a:hover {
    color: var(--sq-accent) !important;
  }
  .header, footer {
    background-color: var(--sq-bg) !important;
    transition: background-color 0.3s ease;
  }

  /* ─── Toggle Styles ─── */
  .sq-darkmode-toggle {
    position: relative;
    width: 52px;
    height: 28px;
    background: var(--sq-text);
    border-radius: 14px;
    cursor: pointer;
    border: none;
    padding: 0;
    transition: background 0.3s ease;
    opacity: 0.7;
  }
  .sq-darkmode-toggle:hover { opacity: 1; }
  .sq-darkmode-toggle .sq-toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    background: var(--sq-bg);
    border-radius: 50%;
    transition: transform 0.3s ease, background 0.3s ease;
  }
  [data-theme="dark"] .sq-darkmode-toggle .sq-toggle-knob {
    transform: translateX(24px);
  }

  .sq-darkmode-wrap {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
  }
</style>

<!-- Place in Code Injection → Footer -->
<div class="sq-darkmode-wrap">
  <button class="sq-darkmode-toggle" id="sq-darkmode-btn" aria-label="Toggle dark mode">
    <span class="sq-toggle-knob"></span>
  </button>
</div>

<script>
(function() {
  var btn = document.getElementById('sq-darkmode-btn');
  if (!btn) return;

  function setTheme(theme) {
    document.documentElement.setAttribute('data-theme', theme);
    try { localStorage.setItem('sq-theme', theme); } catch(e) {}
  }

  function getPreferred() {
    try {
      var saved = localStorage.getItem('sq-theme');
      if (saved) return saved;
    } catch(e) {}
    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
      return 'dark';
    }
    return 'light';
  }

  // Initialize
  setTheme(getPreferred());

  // Toggle on click
  btn.addEventListener('click', function() {
    var current = document.documentElement.getAttribute('data-theme') || 'light';
    setTheme(current === 'dark' ? 'light' : 'dark');
  });

  // Listen for system preference changes
  if (window.matchMedia) {
    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
      try { if (localStorage.getItem('sq-theme')) return; } catch(ex) {}
      setTheme(e.matches ? 'dark' : 'light');
    });
  }
})();
</script>