パーツ番号 07-04-05 ・ CSSのみ

ダークモード配色比較

ライトモードとダークモードの配色を左右に並べて見比べる見本です。WordPressサイトのダークモード対応設計時の色決めに役立ちます。

staticcss

プレビュー

ソースコード

HTML

<div class="d07-04-05-compare">
          <div class="d07-04-05-side d07-04-05-light">
            <span class="d07-04-05-tag">Light</span>
            <div class="d07-04-05-sw" style="background:#fff;border:1px solid #e2e8f0"></div>
            <div class="d07-04-05-sw" style="background:#f1f5f9"></div>
            <div class="d07-04-05-sw" style="background:#2563eb"></div>
          </div>
          <div class="d07-04-05-side d07-04-05-dark">
            <span class="d07-04-05-tag">Dark</span>
            <div class="d07-04-05-sw" style="background:#0f172a"></div>
            <div class="d07-04-05-sw" style="background:#1e293b"></div>
            <div class="d07-04-05-sw" style="background:#60a5fa"></div>
          </div>
        </div>

CSS

.d07-04-05{background:#f8fafc}
        .d07-04-05-compare{display:flex;gap:12px}
        .d07-04-05-side{width:96px;border-radius:12px;padding:12px 10px;text-align:center;box-shadow:0 6px 16px rgba(15,23,42,.08)}
        .d07-04-05-light{background:#fff}
        .d07-04-05-dark{background:#0f172a}
        .d07-04-05-tag{display:block;font-size:10.5px;font-weight:700;margin-bottom:8px;color:#64748b}
        .d07-04-05-dark .d07-04-05-tag{color:#94a3b8}
        .d07-04-05-sw{height:22px;border-radius:6px;margin-bottom:6px}

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