CSS変数でカラースキームを切り替え！ダークモード対応の作り方を徹底解説

カラースキームを変数だけで切り替える実装例

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

生徒

「最近のアプリやサイトにある、画面を黒くするダークモードってどうやって作っているんですか？」

先生

「それは『カラースキーム』という色の組み合わせを、CSS変数を使って切り替えているんですよ。」

生徒

「色を一つずつ全部書き換えるのは大変そうですが……。」

先生

「いいえ、CSS変数を使えば、たった数行のコードを書き換えるだけでサイト全体の色を一気に変更できるんです。さっそく仕組みを見てみましょう！」

1. カラースキームとCSS変数の基本を学ぼう

ウェブサイト制作における「カラースキーム」とは、背景色、文字色、ボタンの色など、サイト全体で使う「色の設計図」のことです。プログラミング未経験の方には、「着せ替え人形」をイメージしてもらうと分かりやすいかもしれません。同じ人形（サイトの構造）でも、服（色）をまるごと取り替えることで、ガラッと雰囲気を変えることができます。

ここで活躍するのが「CSS変数（カスタムプロパティ）」です。これは、色に「背景の色」「見出しの色」といった名前を付けて、箱の中に保存しておく機能です。箱の名前を呼ぶように設定しておけば、後で箱の中身の色を変えるだけで、その色を使っているすべての場所が自動的に変わります。パソコンの操作が初めての方でも、この「箱の中身を入れ替える」という感覚さえ掴めば、ダークモードの実装は難しくありません。

2. ライトモードとダークモードの色の箱を用意する

まずは、標準的な「ライトモード（明るい画面）」と、目に優しい「ダークモード（暗い画面）」の二種類の色を準備しましょう。 CSSでは「:root」という場所に変数を書きます。これは、ウェブサイトの「一番大元の設定場所」という意味です。

たとえば、ライトモードでは背景を白、文字を黒にします。一方でダークモードでは、背景を黒、文字を白に設定します。このように、役割（背景色や文字色）は同じでも、モードによって中身の色を対照的に設定するのがコツです。専門用語では、これを「変数の定義」と呼びます。


<style>
	/* ライトモード（標準の設定） */
	:root {
		--bg-color: #ffffff;
		--text-color: #333333;
		--accent-color: #007bff;
	}

	/* ダークモード用の設定（後で切り替えるための準備） */
	[data-theme="dark"] {
		--bg-color: #1a1a1a;
		--text-color: #f5f5f5;
		--accent-color: #ffca28;
	}

	body {
		background-color: var(--bg-color);
		color: var(--text-color);
		padding: 20px;
		font-family: sans-serif;
	}

	.card-box {
		border: 2px solid var(--accent-color);
		padding: 15px;
		border-radius: 10px;
	}
</style>

<div class="card-box">
	<h3>色の切り替えテスト</h3>
	<p>CSS変数を使えば、背景や文字の色が連動して変わります。</p>
</div>

ブラウザ表示

3. 属性を切り替えてデザインを一瞬で変更する仕組み

先ほどのコードにあった「[data-theme="dark"]」という書き方は、「データ属性」と呼ばれる目印です。これは、HTMLのタグに「今はダークモードですよ」というラベルを貼るようなものです。

このラベルが貼られたときだけ、CSS変数の「箱の中身」がダークモード用の色に上書きされます。初心者の方は、「モードを切り替えるスイッチ」を想像してください。スイッチが入ると（ラベルが貼られると）、すべての変数が夜用の色にパッと切り替わる仕組みです。これによって、HTMLの中身を書き換えることなく、見た目だけをスマートに変更できるのです。

4. ボタンクリックでモードを切り替える実践例

実際にボタンを押して、色が変わる様子を確認してみましょう。プログラミング未経験の方には少し難しく感じるかもしれませんが、JavaScript（ジャバスクリプト）という魔法の言葉を一行使うだけで、この切り替えボタンは作れます。

「ボタンを押したら、HTMLの一番上のタグに dark というラベルを貼る（または剥がす）」という命令を書きます。この動作により、先ほど用意したCSS変数の切り替えが発動します。一度この仕組みを作ってしまえば、サイトがどんなに巨大になっても、ボタン一つで全体の配色をコントロールできるようになります。


<style>
	:root {
		--bg-color: #f8f9fa;
		--text-color: #212529;
		--btn-bg: #333;
		--btn-text: #fff;
	}

	[data-theme="dark"] {
		--bg-color: #212529;
		--text-color: #f8f9fa;
		--btn-bg: #f8f9fa;
		--btn-text: #212529;
	}

	.container {
		background-color: var(--bg-color);
		color: var(--text-color);
		padding: 30px;
		text-align: center;
		transition: 0.3s; /* ゆっくり色を変える設定 */
	}

	.theme-toggle {
		background-color: var(--btn-bg);
		color: var(--btn-text);
		padding: 10px 20px;
		border: none;
		border-radius: 5px;
		cursor: pointer;
	}
</style>

<div class="container" id="theme-root">
	<h2>カラースキーム切り替え</h2>
	<p>下のボタンを押すと、昼と夜が入れ替わります。</p>
	<button class="theme-toggle" onclick="toggleTheme()">モードを切り替える</button>
</div>

<script>
	function toggleTheme() {
		const root = document.getElementById('theme-root');
		if (root.getAttribute('data-theme') === 'dark') {
			root.removeAttribute('data-theme');
		} else {
			root.setAttribute('data-theme', 'dark');
		}
	}
</script>

ブラウザ表示

5. パソコンの設定に合わせて自動で色を変える応用術

実は、ボタンを押さなくても「ユーザーが普段パソコンやスマホをダークモードで使っているか」を自動で判別する方法があります。これを「メディアクエリ」と呼びます。

「prefers-color-scheme（プリファーズ・カラー・スキーム）」という命令を使うと、「この人は暗い画面が好きみたいだよ」という情報をパソコンから受け取ることができます。これを使って変数を定義すれば、サイトを開いた瞬間に、その人の好みにぴったりの色で表示されるようになります。これは、プロが制作するサイトでは欠かせない、おもてなしのテクニックの一つです。

6. 柔らかい印象を作るパステルカラーの切り替え例

ダークモードだけでなく、サイトの「テーマカラー」を何種類も作りたいときにも変数は役立ちます。たとえば、春にはピンク、夏にはブルーといった季節ごとの切り替えです。

変数の名前は「--main-theme」としたまま、中身の色だけを「サクラ色」から「空色」に変えるだけで済みます。直接色を書き込んでいると、季節が変わるたびに何百箇所も修正が必要になりますが、変数設計がしっかりしていれば、修正はほんの数秒で終わります。パソコン初心者の方こそ、後で自分が楽をするために、この「変数の設計」を意識してみましょう。


<style>
	.season-box {
		/* 最初は春のイメージ */
		--season-color: #ffb7c5;
		--season-text: #6d4c41;
		background-color: var(--season-color);
		color: var(--season-text);
		padding: 20px;
		border-radius: 15px;
		text-align: center;
	}

	.summer-theme {
		/* クラスがつくと夏の色に変わる */
		--season-color: #81d4fa;
		--season-text: #01579b;
	}
</style>

<div class="season-box">
	<h4>季節のテーマ切り替え</h4>
	<p>今は春のパステルカラーです。</p>
</div>

<div class="season-box summer-theme">
	<h4>季節のテーマ切り替え</h4>
	<p>クラスを一つ足すだけで夏の色になりました！</p>
</div>

ブラウザ表示

7. メンテナンス性を高める「名前付け」のルール

変数の箱に名前を付けるとき、「--color1」「--color2」のような名前にするのは避けましょう。後から見返したときに、何の色だか分からなくなってしまうからです。

「--bg-main（メインの背景色）」「--text-sub（補足の文字色）」のように、役割を名前に含めるのがプロの鉄則です。パソコンのタイピングに慣れていないと、長い名前を書くのは大変かもしれませんが、意味の通じる名前を付けておくことで、未来の自分が作業をするときに迷わなくなります。整理整頓されたクローゼットのように、名前を見ただけで何が入っているか分かる状態を目指しましょう。

8. 変数切り替えで失敗しないための注意点

色の切り替えを実装するときに一番多いミスは、スペル（綴り）の間違いです。変数を定義したときは「--background」なのに、使うときに「--backgrund」と「o」を抜かしてしまうと、色は反映されません。

また、記号の「:（コロン）」や「;（セミコロン）」は必ず「半角」で入力してください。日本語入力のまま全角の「：」を使ってしまうと、パソコンはそれを命令として認識できず、無視してしまいます。もし色がうまく変わらないときは、まずは半角で正しく書けているかを、落ち着いて一文字ずつ確認してみてください。

9. 色を数値以外で管理する透明度のテクニック

最後に応用として、色の「透明度」も変数で管理してみましょう。最近のデザインでは、背景の色を少し透かせて後ろの画像を見せることがよくあります。

「--opacity-level」という変数に「0.8（80%の濃さ）」といった数値を入れておけば、サイト全体の透け具合を一度に調整できます。色は同じでも、透明度を変えるだけで「ライトモードではハッキリ」「ダークモードでは少し透かして幻想的に」といった高度な演出が可能になります。 CSS変数は、単なる色の保存場所ではなく、あなたのアイデア次第で無限の表現を生み出す魔法の道具なのです。

2026年最新スキルアップ・実践セミナー