다크모드 팔레트

<div class="wrap">
  <div class="stage" id="stage">
    <div class="row">
      <div class="lvl" id="l0">Surface</div>
      <div class="lvl" id="l1">+1</div>
      <div class="lvl" id="l2">+2</div>
    </div>
  </div>
  <button class="toggle" id="toggle"><span id="tglText">Dark</span></button>
</div>

.wrap{width:min(440px,92%);display:grid;gap:clamp(10px,2.6vmin,16px);justify-items:center}
.stage{width:100%;border-radius:18px;padding:clamp(12px,3.4vmin,20px);transition:background .5s}
.row{display:flex;gap:clamp(8px,2.6vmin,16px);justify-content:center}
.lvl{flex:1;max-width:120px;aspect-ratio:1;border-radius:12px;display:grid;place-items:center;text-align:center;
  font:700 clamp(9px,2.6vmin,12px)/1 ui-monospace,monospace;border:1px solid transparent;
  transition:background .5s,box-shadow .5s,color .5s,border-color .5s}
.toggle{border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:999px;padding:8px 18px;font:700 clamp(10px,2.6vmin,12px)/1 system-ui;cursor:pointer}

let isDark = false;
const stage = document.getElementById('stage'), l0 = document.getElementById('l0'), l1 = document.getElementById('l1'), l2 = document.getElementById('l2');
const toggle = document.getElementById('toggle'), tglText = document.getElementById('tglText');
const HUE = 230;
function hsl(h, s, l) { return 'hsl(' + h + ', ' + s + '%, ' + l + '%)'; }

function render() {
  if (isDark) {
    stage.style.background = hsl(HUE, 22, 9);
    l0.style.background = hsl(HUE, 14, 14); l0.style.borderColor = 'transparent'; l0.style.boxShadow = 'none'; l0.style.color = '#f4f4f6';
    l1.style.background = hsl(HUE, 14, 20); l1.style.borderColor = 'transparent'; l1.style.boxShadow = '0 6px 16px rgba(0,0,0,.35)'; l1.style.color = '#f4f4f6';
    l2.style.background = hsl(HUE, 14, 27); l2.style.borderColor = 'transparent'; l2.style.boxShadow = '0 10px 24px rgba(0,0,0,.45)'; l2.style.color = '#f4f4f6';
  } else {
    stage.style.background = hsl(HUE, 30, 94);
    l0.style.background = '#ffffff'; l0.style.borderColor = 'var(--line)'; l0.style.boxShadow = 'none'; l0.style.color = '#15151a';
    l1.style.background = '#ffffff'; l1.style.borderColor = 'var(--line)'; l1.style.boxShadow = '0 6px 16px rgba(0,0,0,.10)'; l1.style.color = '#15151a';
    l2.style.background = '#ffffff'; l2.style.borderColor = 'var(--line)'; l2.style.boxShadow = '0 10px 24px rgba(0,0,0,.16)'; l2.style.color = '#15151a';
  }
  tglText.textContent = isDark ? 'Dark' : 'Light';
}
function flip() { isDark = !isDark; render(); }
render();
toggle.addEventListener('click', e => { e.stopPropagation(); flip(); });
setInterval(flip, 2600);