ダークモードとは
読み：だーくもーど英語：Dark mode
更新日：2026年10月31日
ひとことで
ダークモードとは、画面の背景を暗い色に、文字を明るい色にして表示する見た目の設定のことです。
ひとに説明するなら
「ダークモードは、白い背景に黒い文字、を反対にした表示。夜や暗い部屋で画面がまぶしくない。Web やアプリをつくる側は、ライトとダークの両方で、色がきれいに見えるように考える必要がある」
白と黒を入れ替える、だけではない
ダークモードは、スマホやパソコンの設定で選べる、背景が暗い表示です。暗い場所でまぶしさを抑えられることや、好みで選ばれることが多い設定です。
つくる側から見ると、白と黒をそのまま入れ替えるだけでは、うまくいかないことがよくあります。色の見え方が、背景の明るさで変わるからです。
同じ画面でも、背景と文字の明るさを入れ替えると印象が変わります。
ダークモードの色づくりのコツ
- 背景は真っ黒より、少し明るい暗い灰色や、わずかに色みのある暗い色にすると、目が疲れにくく、奥行きも出しやすい
- 文字は真っ白より、少し抑えた明るい色にすると、まぶしさが和らぐ
- 鮮やかな色は、暗い背景の上ではぎらついて見えやすい。少し明るく、少し鮮やかさを抑える
- ライトでもダークでも、文字と背景のコントラスト比を確かめる
Web でダークモードに対応するには
CSS では、使う人の設定がダークかどうかを「prefers-color-scheme」で調べて、色を切り替えられます。色を CSS 変数にまとめておくと、切り替えは変数の中身を入れ替えるだけで済みます。
:root {
--bg: #F6F4EF;
--text: #2A2925;
}
@media (prefers-color-scheme: dark) {
:root {
--bg: #1E1D1A;
--text: #E9E6DF;
}
}
body { background: var(--bg); color: var(--text); }
よくある勘違い
勘違いダークモードは、色を反転させればできる
ほんとうは反転すると、鮮やかな色がぎらついたり、写真が不自然になったりします。ダーク用に色を調整します。
勘違い暗い背景なら、真っ黒がいちばんいい
ほんとうは真っ黒と真っ白の組み合わせは、まぶしく感じられることがあります。少しやわらげた色がよく使われます。
COLOR JOURNEY で使うには
COLOR JOURNEY のパレットの暗い側の色は、ダークモードの背景の候補になります。真っ黒の代わりにパレットのいちばん暗い色を背景に、いちばん明るい色を文字に使うと、パレットの空気をまとったダークモードになります。
パレットのページからダウンロードできる CSS には、6色に加えて、背景（--cj-bg）、文字（--cj-text）、アクセント（--cj-accent）、面（--cj-surface）などの役割の変数が入っています。ダークモードでは、この役割の変数の中身を、パレットの暗い側の色に入れ替えて使ってください。
参考になるパレット
クイズ
Web で、使う人の設定がダークかどうかを調べる CSS は？
prefers-color-scheme
正解です。答えは「prefers-color-scheme」。prefers-color-scheme で、ライトかダークかを調べられます。
color-mix
ちがいます。答えは「prefers-color-scheme」。prefers-color-scheme で、ライトかダークかを調べられます。
linear-gradient
ちがいます。答えは「prefers-color-scheme」。prefers-color-scheme で、ライトかダークかを調べられます。
ダークモードで、鮮やかな色をそのまま使うと起きやすいことは？
ぎらついて見える
正解です。答えは「ぎらついて見える」。暗い背景の上では、鮮やかな色が強く見えます。少し抑えると落ち着きます。
文字が大きくなる
ちがいます。答えは「ぎらついて見える」。暗い背景の上では、鮮やかな色が強く見えます。少し抑えると落ち着きます。
色が消える
ちがいます。答えは「ぎらついて見える」。暗い背景の上では、鮮やかな色が強く見えます。少し抑えると落ち着きます。
よくある質問
ダークモードとは何ですか？
画面の背景を暗い色に、文字を明るい色にして表示する見た目の設定です。
ダークモードの背景は真っ黒がいいですか？
真っ黒より、少し明るい暗い灰色や、わずかに色みのある暗い色がよく使われます。
Web サイトをダークモードに対応させるには？
CSS の prefers-color-scheme で設定を調べ、色を切り替えます。色を CSS 変数にまとめておくと簡単です。