ダークモードを実装する

LastModified
Category CSS

概要

メディアクエリ prefers-color-scheme の使い方

実装

ダークモードにすると背景が黄色になります


<div class="dark-box">
ダークモードにすると背景が黄色になります
</div>



.dark-box{
    color: #333;
    background-color: #ddd;
    padding: 3rem;
}

@media (prefers-color-scheme: dark) {
    .dark-box{
        color: blue;
        background-color: yellow;
    }
}

CSS変数との連携

関連

cssで変数を使う
CSS変数(カスタムプロパティ)の使い方

ダークモードにすると背景が赤になります


<div class="dark-box02">
ダークモードにすると背景が赤になります
</div>



:root {
    /* 変数を定義 */
    --box-color02: #000;
    --box-bg02: #ddd;
}

@media (prefers-color-scheme: dark) {
    /* 変数を再定義 */
    :root {
        --box-color02: blue;
        --box-bg02: red;
    }
}

.dark-box02{
    color: var(--box-color02);
    background-color: var(--box-bg02);
    padding: 3rem;
}

chromeでのテスト・確認方法

Settings > Preferences > Rendering 内の 「Emulate CSS media feature prefers-color-scheme」の値を 「prefers-color-scheme: dark」に変更する

  1. F12 キーでデバッグコンソールを開く
  2. メニューから「Settings」を開く
  3. 「Preferences」>「Rendering」項目内の「Emulate CSS media feature prefers-color-scheme」の値を 「prefers-color-scheme: dark」に変更する