はじめに
こんにちは、だいせんせーです。
最近は当たり前のように「ダークモード」がついてるサイトが増えてきましたよね。
この宮崎クリエイターズブログにもダークモードが搭載されています。
正直、ちょっとカッコいいし、夜に見ると目にやさしいです。
そこで「自分のサイトでもサクッと導入できるんじゃ？」と思って、実装してみました。
ダークモードとは、アプリケーションやウェブサイトの背景色を暗色（主に黒や濃いグレー）に設定し、文字などの情報を明るい色で表示するユーザーインターフェース（UI）の配色スタイルのことです。
もともとは開発者向けのエディタやターミナルなどで採用されていた配色ですが、近年では目の疲労を軽減する効果や、バッテリー消費を抑えられるという理由から、一般ユーザー向けのサービスにも広く導入されるようになりました。
実際にやってみる
ここでは「実際にやってみたコツ」を中心にまとめます。
まずはCSSだけで
最初に試したのはこれです。
prefers-color-schemeを使って、OSの設定に従わせるやり方です。
@media (prefers-color-scheme: dark) {
body {
background: #0b0b0b;
color: #f5f5f5;
}
}これを書くだけで、ユーザーがPCやスマホをダークモードにしていたら、自動でサイトもダークになります。一番お手軽な入口です。
2. 切り替えボタンをつける
でも「常にダークがいい人」もいれば「明るい方が好きな人」もいます。
なので切り替えスイッチをつけると親切です。
ボタンを押したらライトダークが切り替わって、その設定を保存する流れです。
const key = 'theme';
const root = document.documentElement;
const saved = localStorage.getItem(key);
// 初期テーマを決める
if (saved) {
root.dataset.theme = saved;
} else {
root.dataset.theme = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
// クリックで切り替え
document.getElementById('themeToggle').addEventListener('click', () => {
root.dataset.theme = root.dataset.theme === 'dark' ? 'light' : 'dark';
localStorage.setItem(key, root.dataset.theme);
});
CSS側はこんな感じに「変数」で色を管理すると楽です。
:root[data-theme="light"] {
--bg: #ffffff;
--fg: #111111;
}
:root[data-theme="dark"] {
--bg: #0b0b0b;
--fg: #f5f5f5;
}
body {
background: var(--bg);
color: var(--fg);
}
PHPを使ってサーバーで初期化もできる
自分は普段PHPを書いているので、ついでにCookieを使った方法も試してみました。
ユーザーが選んだテーマをCookieに保存しておけば、ページを開いた瞬間からそのテーマで出せます。
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0b0b0b" media="(prefers-color-scheme: dark)">こうしておくと、ページ読み込み直後の「ライト→ダークに切り替わるチラつき」を防げます。ちょっとした工夫ですが、UXがぐっとよくなります。
4. 実装するときのちょっとしたTips
やってみて「これは気をつけたいな」と思ったポイントをまとめると…
1. コントラストはしっかり
暗い背景に薄い文字を置くと、思った以上に読みにくくなります。
特にグレー系の文字は要注意です。
WCAG AAくらいを意識すると安心です。
2. 画像・ロゴの扱い
白背景前提で作られたロゴは、ダーク背景では浮いて見えます。
SVGなら fill=”currentColor” を使うと、テーマに応じて色を変えられて便利です。
それが難しければ、ダーク用のロゴを別に用意して切り替えるのも手です。
3. モバイルの通知バーも忘れずに
スマホで見たとき、通知バー（ブラウザ上部の色）がライト用のままだと統一感が崩れます。以下のように<meta>を<head> に仕込んでおくと解決です。
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#0b0b0b" media="(prefers-color-scheme: dark)">4. 切り替えアニメーションは控えめに
背景や文字色がスッと変わるくらいで十分です。
派手にアニメーションさせると逆に読みづらくなります。
有名サイトのダークモード事例
「実際どうやってるの？」と思って観察した例をいくつか紹介します。
X(旧Twitter)
- デフォルトはOSに追従
- 設定画面で「ライト / ダーク / 自動」から選べる
- ダークにも「Dim（濃いグレー）」と「Lights Out（完全ブラック）」の2種類あり、細かいニーズに対応している。
GitHub
- ログイン後の設定で「ライト / ダーク / システム」選択可能
- ダークでもコントラストのバランスが秀逸で、コードブロックの可読性をしっかり確保
- アイコンやロゴもテーマごとに最適化されていて参考になります
YouTube
- OSに追従しつつ、メニューから個別に選べる
- 背景は真っ黒ではなくダークグレーで、長時間見ても目が疲れにくい工夫
- サムネイルや色付きUIとのコントラストが強調され、動画が映えます
Slack
- 完全なカスタムテーマ機能もあり
- 「ライト / ダーク」だけでなく、ユーザーが細かく色を設定できるのが特徴
- 企業ブランドやチームカラーを取り込みやすいです
どのサービスも「単に背景を黒くした」ではなく、文字色・UI要素・ブランドカラーとの相性まで調整しています。
実装の時はこのあたりを参考にすると、より完成度が高いダークモードになるはずです。
まとめ
まずはCSSだけでも十分対応可能 → 最低限のダークモードは一瞬で導入できます。
トグル＋保存でカスタマイズ性アップ → ユーザーが自分好みに選べるのは大きな利点です。
PHPと組み合わせると完成度が高める → 初期表示から自然にテーマを反映できます。
「思ったより簡単にできる！」というのが正直な感想です。
