light-dark()

<div class="wrap" id="scheme">
  <div class="badge" id="badge"><svg viewBox="0 0 10 10"><path id="bpath" d="M1.5 5.2l2.6 2.6L8.5 2.4" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg><span id="btext">확인 중</span></div>
  <div class="box" id="box">light-dark()</div>
</div>

.wrap{position:relative;width:100%;height:100%;display:grid;place-items:center;color-scheme:light dark}
.box{width:160px;height:70px;border-radius:12px;display:grid;place-items:center;font-size:12px;font-weight:700;
  background:light-dark(#f1f0fb,#1c1c2b);color:light-dark(#3d3dcf,#a7a6ff);border:1px solid light-dark(#dcdaf7,#33334a);transition:.4s}
.box.fallback.is-light{background:#f1f0fb;color:#3d3dcf;border-color:#dcdaf7}
.box.fallback.is-dark{background:#1c1c2b;color:#a7a6ff;border-color:#33334a}
.badge{position:absolute;top:10px;right:10px;display:flex;align-items:center;gap:5px;padding:4px 9px;border-radius:999px;font-size:10px;font-weight:700;background:var(--bg);border:1px solid var(--line);color:var(--accent-3);z-index:2}
.badge.no{color:var(--accent-2)}
.badge svg{width:9px;height:9px}

const ok = CSS.supports('color', 'light-dark(white, black)');
const b=document.getElementById('badge'),p=document.getElementById('bpath'),t=document.getElementById('btext');
b.classList.toggle('no', !ok);
p.setAttribute('d', ok ? 'M1.5 5.2l2.6 2.6L8.5 2.4' : 'M2 2l6 6M8 2l-6 6');
t.textContent = ok ? 'light-dark() 지원됨' : '미지원 · 이중정의 폴백';
const scheme = document.getElementById('scheme'), box = document.getElementById('box');
if (!ok) box.classList.add('fallback');
let dark = false;
setInterval(() => {
  dark = !dark;
  scheme.style.colorScheme = dark ? 'dark' : 'light';
  box.classList.toggle('is-dark', dark);
  box.classList.toggle('is-light', !dark);
}, 1600);