【CSS】色をまとめてダークテーマも対応！

css では主に見た目の部分を調整することができます。

その中で色を設定することも多くあるでしょう。

直に 16 進数などで色を指定することもできますが、
予め色を決めて名前をつけておいてその名前で呼び出すととても便利でしょう。

例えば、同じ色を複数の場所で使用することがあるとします。

その時に同じ色を使う所が 100 個もあったら？

手作業ですべてを変更するのはとてもとてもとても大変です。

そこで、色を名前で管理することで
1 箇所だけ変更すればまとめて変更が反映されるようにしてみます！

カスタムプロパティで色を管理

CSS カスタムプロパティ（変数）の使用

以下のように記述することで--hogeという名前で#000000という色を管理できます。

--hoge-color: #000000;

名前は--【任意の名前】の形式で指定する必要があります。

そして、これをどこでも使用できるようにするために、:rootという擬似的なクラス内に記述します。

:root {
    --hoge-color: #000000;
}

:root 擬似クラスの使用

この名前を使って色を指定する際は、以下のように記述します。

.nanika {
    color: var(--hoge-color);
}

var(【プロパティ名】)という形で指定できます。

同じ色を使用するところで同じように--hoge-colorを指定することで、#000000を別の色に変えるのも 1 箇所の変更でよくなります。

ダークテーマ対応

上記のように色をカスタムプロパティで管理するようにすることができれば、あとは簡単です。

ダークモードの時は、--hoge-colorをダークモードの時に設定したい色に変えればいいのです。

ダークモードの判定

prefers-color-schemeというメディア特性を利用します。

以下のように@media (prefers-color-scheme: dark)でくくった中に、ダークモードの時に使用したい色に変更します。

@media (prefers-color-scheme: dark) {
    .hoge {
        --hoge-color: #ffffff;
    }
}

これでダークモードの時は別の色が設定されるので、お手軽にダークモード対応ができます。

light-dark()

まだ実験的な機能ですが、便利そうなものを見つけたのでメモしておきます。

light-dark()という関数です。

color: light-dark(var(--light), var(--dark));

こんな感じで使えるので、細かく指定したい部分に役立ちそうです！

参考

CSS カスタムプロパティ（変数）の使用

prefers-color-scheme

light-dark()