先生と生徒の会話形式で理解しよう

生徒

「最近、スマホやパソコンでダークモードをよく見かけますけど、あれってどうやって作るんですか？」

先生

「それはCSSで、ユーザーの設定に応じて色を変えるように工夫しているんですよ。」

生徒

「CSSだけでダークモードにできるんですか？」

先生

「はい。メディアクエリという仕組みを使えば、色の切り替えが簡単にできます！」

1. ダークモードとは？なぜ必要なの？

ダークモードとは、背景を暗くして文字を明るくするデザインのことです。

夜に画面を見るときに目が疲れにくくなったり、電力の節約にもつながるなどのメリットがあります。

最近では、スマートフォンやパソコンでも標準でダークモードが使われていることが多く、Webサイトでも対応するのが一般的になってきています。

2. CSSで色を切り替えるにはどうすればいい？

ユーザーがダークモードを使っているかどうかは、CSSの「メディアクエリ（@media）」という仕組みを使って調べられます。

具体的には「prefers-color-scheme」という指定を使います。

prefers-color-scheme: light は、明るい（ライト）モード用
prefers-color-scheme: dark は、暗い（ダーク）モード用

この指定を使って、それぞれのモードに合った色を設定することができます。

3. 実際にダークモードをCSSで作ってみよう

まずは、通常（ライトモード）の色を設定して、その後にダークモード用のスタイルを上書きしてみましょう。


<style>
:root {
    --bg-color: #ffffff;
    --text-color: #000000;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* ダークモードの設定 */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #121212;
        --text-color: #ffffff;
    }
}
</style>

<h1>これはダークモード対応の見出しです</h1>
<p>背景と文字の色が自動で切り替わります。</p>

ブラウザ表示

このように、CSSの変数とメディアクエリを使うと、簡単にダークモード対応の色設定ができます。

4. CSS変数を使うと管理がラクになる理由

ダークモード対応では、色を一か所にまとめて管理しておくと、あとで変更するのが簡単になります。

たとえば、上のコードでは「--bg-color」や「--text-color」という変数を使っていますね。

このようにCSS変数を使っておけば、背景色や文字色を変えたいときに、すべての場所を直さなくても、変数の中身を変えるだけで済みます。

明るいモードと暗いモードで、それぞれの変数を切り替えるだけで、全体の色が自動で変わります。

5. よく使う色の組み合わせ例

初心者の方は、どんな色を使えばいいかわからないことも多いと思います。

以下は、ライトモードとダークモードでよく使われる色の例です。

要素	ライトモード	ダークモード
背景色	#ffffff（白）	#121212（黒に近いグレー）
文字色	#000000（黒）	#ffffff（白）
リンク色	#1a0dab（青）	#8ab4f8（明るい青）

このように、明るい背景には濃い文字を、暗い背景には明るい文字を使うと、読みやすくなります。

6. ダークモードのときに気をつけたいポイント

ダークモード対応をするときには、次のポイントに注意しましょう。

コントラスト：背景と文字の明るさにしっかり差をつける
リンクの色：暗い背景でも目立つ色にする
画像やアイコン：背景が変わっても見えるように工夫する

特に文字と背景の色が似すぎてしまうと、読みにくくなってしまうので、明暗のバランスを意識しましょう。

7. 色の設定を管理するテクニック

色をたくさん使うと、どこでどの色を使っているのか分かりにくくなります。

そんなときは、CSS変数を使って「テーマカラー」ごとに整理しておくと便利です。


<style>
:root {
    --background: #ffffff;
    --text: #000000;
    --link: #1a0dab;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: #121212;
        --text: #ffffff;
        --link: #8ab4f8;
    }
}

body {
    background-color: var(--background);
    color: var(--text);
}

a {
    color: var(--link);
}
</style>

<body>
    <h1>ダークモードに対応したページ</h1>
    <p>リンクはこちら：<a href="#">サンプルリンク</a></p>
</body>

ブラウザ表示

このように書いておけば、色の変更や管理がとても簡単になります。

まとめ

ここまで、ダークモードに対応したCSSの色設定について、初心者にも分かりやすい形で丁寧に理解してきました。ダークモードは夜間の閲覧がしやすく、画面の明るさによる疲れを軽減する効果があり、現代のWebデザインにおいて欠かせない存在となっています。特にスマートフォンやパソコンの環境設定でダークモードを選べるようになったことで、Webサイト側でも適切に対応することが求められています。背景色と文字色の切り替えは、見やすさや読みやすさに直結し、ユーザーが快適にコンテンツを楽しめるかどうかに大きく関わります。

記事で紹介したように、まずCSS変数を用いて色を統一的に管理し、必要に応じてライトモード用とダークモード用の値を定義しておくと、デザイン全体のバランスが保たれ、変更にも柔軟に対応できるようになります。特に大規模なサイトでは、複数箇所に色指定を散らばせず、変数で管理しておくメリットが非常に大きいといえます。たとえば背景色、文字色、リンク色などをセットとして整理し、テーマに合わせた色味を揃えておくことで、ページ全体の統一感が生まれます。

また、ダークモードの切り替えには複数の方法がありますが、実務ではbodyタグにテーマ用のクラスを付けて切り替える方式が扱いやすく、多くのフレームワークとも相性が良い点が特徴です。この方法であれば、JavaScriptでボタンを押したタイミングでdark-themeクラスを付与するだけで、サイト全体の配色を一括で切り替えることができます。メディアクエリを利用したOS依存の切り替え方式もありますが、ユーザーが任意で明るさを選べる切り替えボタンを備えておく方が柔軟で、デザインとしての自由度も高くなります。

さらに、記事内で学んだ色の組み合わせやコントラストの調整は、快適な閲覧体験を提供するための重要な要素です。特にダークモードでは、文字色やリンク色が背景に埋もれてしまわないよう、明るさや鮮やかさのバランスを慎重に判断する必要があります。暗い背景に対して白い文字を使う場合でも、純白に近い色はまぶしさを感じるため、少し柔らかい白に調整しておくと読みやすくなります。このような細かな気配りが、全体の品質を大きく高めてくれます。

最後に、ここでは実際にbody.dark-themeクラスを使った切り替え例を改めて確認しながら、どのようにCSS変数とテーマクラスを組み合わせていくかをまとめておきます。これにより、実務でも使いやすく、かつ管理しやすいテーマ切り替えの基礎がしっかり身につきます。

ダークテーマとライトテーマの切り替えサンプル


<style>
/* ライトモード（デフォルト） */
body {
    --background: #ffffff;
    --text: #000000;
    --link: #1a0dab;
    background-color: var(--background);
    color: var(--text);
}

a {
    color: var(--link);
}

/* ダークモード（dark-theme クラスを付けて切り替える） */
body.dark-theme {
    --background: #121212;
    --text: #ffffff;
    --link: #8ab4f8;
    background-color: var(--background);
    color: var(--text);
}

body.dark-theme a {
    color: var(--link);
}
</style>

<body class="dark-theme">
    <h1>ダークモードが適用された見出し</h1>
    <p>テーマ切り替えはCSS変数とクラス制御で簡単に実現できます。</p>
    <p><a href="#">リンクの色も変わります</a></p>
</body>

ブラウザ表示

このように、クラス付けによる切り替え方式は、ユーザーの操作でテーマを切り替えたい場合にも、OS設定に関係なくデザインを制御したい場合にも非常に便利です。デザインの規模が大きくなっても、変数で整理しておけば色の追加や変更が容易になり、長期的な保守性も高まります。特にダークモードが求められる現代において、この方法を理解しておくことは大きな強みになります。

先生と生徒の振り返り会話

生徒： 今日の内容で、ダークモードってただの色変更ではなくて、見やすさの工夫なんだとよく分かりました！CSS変数を使うと管理も楽ですね。

先生： その通りです。特にテーマ切り替えのような大きな変更がある場合、変数を使っておくと保守性がぐっと上がります。ページ全体の一貫性も保ちやすくなりますよ。

生徒： bodyタグにクラスを付ける方式は、とても分かりやすくて実務でも使いやすそうです。メディアクエリより扱いやすい気がします。

先生： 目的によって使い分けると良いですね。ユーザーに操作させたい場合はクラス切り替え、自動で反映したいならメディアクエリ、と選択肢を持つことが大事です。

生徒： はい！今日のサンプルを参考に、自分のサイトにもテーマ切り替えを実装してみます！