自動・手動ダークモード切り替え
デフォルトではシステム設定に従い、ユーザーが手動で上書きできるテーマ切り替え機能を構築します。
「自動・手動ダークモード切り替え」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。
目標
理想的なダークモードの実装では、デフォルトでOSの設定を自動検出し、ユーザーがそれとは独立して上書きできる切り替えボタンを提供します。設定はページを読み込んでも保持されます。
アーキテクチャの概要
次の3つの状態を処理します。
- システム設定:
prefers-color-schemeとCSS変数を使用します - ユーザーによる上書き: ダーク:
<html>にクラスまたはdata属性を設定します - ユーザーによる上書き: ライト: 自動的にダークにならないよう、別のクラスを設定します
CSSトークンの設定
すべての状態で正しくカスケードするCSS変数を定義します。
<div class="demo" data-theme="dark">Dark token demo</div>
<div class="demo" data-theme="light">Light token demo</div>
JavaScriptによる切り替えロジック
保存された設定を読み取り、適用し、切り替え時に更新します。
<div class="demo" id="theme-demo">Toggle my theme</div>
<div class="demo" data-theme="dark">Dark override example</div>
<button id="toggle-btn">Toggle Theme</button>
<script>
function toggleTheme() {
const current = document.getElementById('theme-demo').dataset.theme;
const system = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
if (!current) {
const next = system === 'dark' ? 'light' : 'dark';
document.getElementById('theme-demo').dataset.theme = next;
} else {
delete document.getElementById('theme-demo').dataset.theme;
}
}
document.getElementById('toggle-btn').addEventListener('click', toggleTheme);
</script>
3状態の切り替え
より洗練された3状態の切り替えです。ライト | システム | ダーク
<div class="demo" id="theme-demo">Cycles: light → system → dark</div>
<div class="demo" data-theme="dark">Dark state example</div>
<p id="state-label">system</p>
<button id="cycle-btn">Cycle Theme</button>
<script>
const states = ['light', 'system', 'dark'];
let current = 'system';
const demo = document.getElementById('theme-demo');
const label = document.getElementById('state-label');
document.getElementById('cycle-btn').addEventListener('click', () => {
current = states[(states.indexOf(current) + 1) % states.length];
label.textContent = current;
if (current === 'system') { delete demo.dataset.theme; } else { demo.dataset.theme = current; }
});
</script>
誤ったテーマのフラッシュを防ぐ
ページのレンダリング前に、保存されたテーマを同期的に適用します。
<pre class="code-sample"><!-- In <head>, before any styles -->
<script>
const t = localStorage.getItem("theme");
if (t) document.documentElement.dataset.theme = t;
</script></pre>
切り替えボタンのアクセシビリティ
切り替えボタンは、現在の状態をスクリーンリーダーに伝える必要があります。切り替え時にはアクセシブルなラベルを更新してください。
<button id="theme-toggle" aria-label="Switch to dark mode">🌙</button>
テーマ切り替えのアニメーション
テーマ変更時に色を滑らかに切り替えます。
<div class="demo" id="at-demo">Smooth theme transition</div>
<button onclick="document.documentElement.classList.add('theme-transitioning'); const d=document.getElementById('at-demo'); const dark = d.style.background==='rgb(17, 17, 17)'; d.style.background = dark ? '#fff' : '#111'; d.style.color = dark ? '#111' : '#fff'; setTimeout(()=>document.documentElement.classList.remove('theme-transitioning'),250);">Toggle</button>
システム設定の変更を監視する
ページを開いている間にユーザーがOSの設定を変更した場合にも反応します。
<p id="status">Listening for system theme changes…</p>
<script>
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
document.getElementById('status').textContent = 'System changed to ' + (e.matches ? 'dark' : 'light');
});
</script>
ダークモードのアイコン
モードごとにアイコンを切り替えます。テーマに対応した画像にはpicture要素を使用するか、CSSで異なるアイコンの表示と非表示を切り替えます。
<div>Light: <span class="icon-sun">☀️</span><span class="icon-moon">🌙</span></div>
<div data-theme="dark">Dark: <span class="icon-sun">☀️</span><span class="icon-moon">🌙</span></div>
まとめ: 実装チェックリスト
ダークモードのチェックリスト:
- すべての配色トークンにCSS変数を使用する
- 自動検出にprefers-color-schemeメディアクエリを使用する
- 手動での上書きにdata-theme属性を使用する
- 設定の保持にlocalStorageを使用する
- フラッシュを防ぐためにhead内にインラインスクリプトを置く
- aria-labelを動的に更新するアクセシブルな切り替えボタンを用意する
確認問題
ページの読み込み時に「誤ったテーマのフラッシュ」を防ぐには、どのような技法を使用しますか。
まとめ
完全なダークモードの切り替えには、テーマトークン用のCSS変数、自動検出用のprefers-color-schemeクエリ、手動上書き用のdata-theme属性、設定保持用のlocalStorage、フラッシュ防止用の同期的なheadスクリプトを使用します。最適なユーザー体験のために、アクセシブルな3状態の切り替え（ライト／システム／ダーク）を提供してください。
AI チューターと学ぶ CSS — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 40
- レッスン
- 159
よくある質問
「自動・手動ダークモード切り替え」レッスンは無料ですか？
はい。「自動・手動ダークモード切り替え」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。
「自動・手動ダークモード切り替え」で何を学びますか？
デフォルトではシステム設定に従い、ユーザーが手動で上書きできるテーマ切り替え機能を構築します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
CSS Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「自動・手動ダークモード切り替え」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このCSS Academyレッスンでコードを書いて実行できますか？
はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- prefers-color-schemeメディアクエリ
- テーマ設定のためのCSS変数
- color-schemeプロパティ
- 自動・手動ダークモード切り替え