パーツ番号 04-08-04 ・ CSSのみ

アイコン切替型トグル

太陽と月のアイコンでモードを表すスイッチです。ダーク/ライトモード切替の設定項目に適します。

staticcss

プレビュー

ソースコード

HTML

<div class="d04-08-04-row">
          <span class="d04-08-04-sw d04-08-04-dark"><span class="d04-08-04-icon">🌙</span></span>
          <span class="d04-08-04-label">ダーク</span>
        </div>
        <div class="d04-08-04-row">
          <span class="d04-08-04-sw d04-08-04-light"><span class="d04-08-04-icon">☀️</span></span>
          <span class="d04-08-04-label">ライト</span>
        </div>

CSS

.d04-08-04{flex-direction:column;gap:16px}
        .d04-08-04-row{display:flex;align-items:center;gap:12px}
        .d04-08-04-sw{position:relative;width:54px;height:28px;border-radius:14px;display:flex;align-items:center}
        .d04-08-04-dark{background:#1f2937;justify-content:flex-end;padding:0 4px}
        .d04-08-04-light{background:#fde68a;justify-content:flex-start;padding:0 4px}
        .d04-08-04-icon{width:20px;height:20px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:11px}
        .d04-08-04-label{font-size:13px;color:#374151;font-weight:600}

クラス名 .d04-08-04 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。