명암 선호

<div class="stage">
  <div class="card" id="card">
    <div class="badge" id="badge">no-preference</div>
    <div class="ln"></div>
    <div class="ln short"></div>
  </div>
</div>

.stage{width:70%;height:80%;display:grid;place-items:center}
.card{width:100%;height:100%;border-radius:14px;border:1px solid var(--line);background:var(--surface);padding:12%;display:flex;flex-direction:column;gap:10%;transition:border-color .4s ease,border-width .4s ease}
.card.more{border-width:2.5px;border-color:var(--fg)}
.badge{align-self:flex-start;font:700 10px/1 ui-monospace,monospace;color:var(--muted);padding:5px 9px;border-radius:999px;border:1px solid var(--line);transition:color .4s ease,border-color .4s ease}
.card.more .badge{color:var(--fg);border-color:var(--fg)}
.ln{height:10px;border-radius:5px;background:var(--muted);opacity:.35;transition:opacity .4s ease,background .4s ease}
.card.more .ln{opacity:1;background:var(--fg)}
.short{width:60%}

const card = document.getElementById('card');
const badge = document.getElementById('badge');
function toggle() {
  const on = card.classList.toggle('more');
  badge.textContent = on ? 'prefers-contrast: more' : 'no-preference';
}
setInterval(toggle, 1800);