<div class="tp-wrap">
  <div class="tp-panel" id="tpPanel" data-theme="light">
    <div class="tp-panel-header">
      <span class="tp-panel-title">Preview Panel</span>
      <label class="tp-switch">
        <input type="checkbox" id="tpToggle" />
        <span class="tp-slider"></span>
      </label>
    </div>
    <p class="tp-panel-text">This panel's appearance follows the saved theme preference.</p>
    <div class="tp-status" id="tpStatus">No preference saved yet — using system default</div>
  </div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; background: #f1f5f9; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }

.tp-wrap { width: 100%; max-width: 380px; }

.tp-panel {
  border-radius: 16px; padding: 22px; transition: background 0.2s, color 0.2s;
  background: #fff; color: #1e293b; box-shadow: 0 8px 24px rgba(15,23,42,0.08); border: 1px solid #e2e8f0;
}
.tp-panel[data-theme="dark"] { background: #0f172a; color: #e2e8f0; border-color: #1e293b; }

.tp-panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.tp-panel-title { font-size: 14px; font-weight: 800; }
.tp-panel-text { font-size: 13px; opacity: 0.75; line-height: 1.5; margin-bottom: 16px; }

.tp-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.tp-switch input { opacity: 0; width: 0; height: 0; }
.tp-slider {
  position: absolute; cursor: pointer; inset: 0; background: #cbd5e1; border-radius: 999px; transition: background 0.15s;
}
.tp-slider::before {
  content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff;
  border-radius: 50%; transition: transform 0.15s;
}
.tp-switch input:checked + .tp-slider { background: #6366f1; }
.tp-switch input:checked + .tp-slider::before { transform: translateX(18px); }

.tp-status {
  font-size: 11.5px; font-weight: 700; padding: 8px 10px; border-radius: 8px;
  background: rgba(99,102,241,0.1); color: #6366f1; font-family: ui-monospace, monospace;
}
.tp-panel[data-theme="dark"] .tp-status { background: rgba(129,140,248,0.15); color: #a5b4fc; }

const panel = document.getElementById('tpPanel');
const toggle = document.getElementById('tpToggle');
const status = document.getElementById('tpStatus');

const STORAGE_KEY = 'theme';

function applyTheme(theme) {
  panel.setAttribute('data-theme', theme);
  toggle.checked = theme === 'dark';
}

function updateStatus(theme, fromStorage) {
  if (fromStorage) {
    status.textContent = 'Saved to localStorage: ' + theme;
  } else {
    status.textContent = 'No preference saved yet — using system default (' + theme + ')';
  }
}

function init() {
  const saved = localStorage.getItem(STORAGE_KEY);
  if (saved === 'dark' || saved === 'light') {
    applyTheme(saved);
    updateStatus(saved, true);
    return;
  }
  const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
  const fallback = prefersDark ? 'dark' : 'light';
  applyTheme(fallback);
  updateStatus(fallback, false);
}

toggle.addEventListener('change', () => {
  const theme = toggle.checked ? 'dark' : 'light';
  applyTheme(theme);
  localStorage.setItem(STORAGE_KEY, theme);
  updateStatus(theme, true);
});

init();