ダーク/ライトモード切替UI

<div class="mini">
          <div class="bar">
            <span class="dot"></span><span class="dot"></span><span class="dot"></span>
            <label class="tgl">
              <input type="checkbox" class="chk">
              <span class="track"><span class="knob"></span></span>
            </label>
          </div>
          <div class="body">
            <h4>ダッシュボード</h4>
            <p>スイッチで配色が滑らかに反転します。</p>
            <button class="btn">続ける</button>
          </div>
        </div>

.d11-02-01 .mini{width:230px;border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.15);background:#fff;color:#1a1a2e;transition:background .5s,color .5s}
        .d11-02-01 .mini.dark{background:#1a1a2e;color:#e8e8f0}
        .d11-02-01 .bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:#f0f0f5;transition:background .5s}
        .d11-02-01 .mini.dark .bar{background:#26264a}
        .d11-02-01 .dot{width:9px;height:9px;border-radius:50%;background:#c9c9d6}
        .d11-02-01 .tgl{margin-left:auto;cursor:pointer}
        .d11-02-01 .chk{display:none}
        .d11-02-01 .track{display:block;width:40px;height:22px;border-radius:22px;background:#c9c9d6;position:relative;transition:background .4s}
        .d11-02-01 .knob{position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .4s}
        .d11-02-01 .chk:checked+.track{background:#5b6ef5}
        .d11-02-01 .chk:checked+.track .knob{left:20px}
        .d11-02-01 .body{padding:16px 18px 20px}
        .d11-02-01 .body h4{margin:0 0 6px;font-size:16px}
        .d11-02-01 .body p{margin:0 0 14px;font-size:12px;opacity:.75;line-height:1.6}
        .d11-02-01 .btn{border:0;border-radius:8px;padding:8px 16px;background:#5b6ef5;color:#fff;font-size:12px;cursor:pointer}

(function(){
        var r=document.querySelector('#item-11-02-01 .d11-02-01');
        var chk=r.querySelector('.chk'),mini=r.querySelector('.mini');
        chk.addEventListener('change',function(){mini.classList.toggle('dark',chk.checked);});
      })();