ボタンひとつでライト・ダークの表示を切り替える機能。CSS変数（カスタムプロパティ）を使うとシンプルに実装でき、AIとの相性も抜群です。
方法①：既存のHTMLからCSS・JSを生成する
AIへのプロンプト例
以下のHTMLにダークモード切り替えを追加してください。
・CSSはCSS変数（カスタムプロパティ）を使って色を管理
・ライト/ダークの切り替えはbodyにクラスを付け外しする方式
・切り替え状態はlocalStorageに保存して、リロード後も維持
・ボタンは🌙/☀️の絵文字を使う
<body>
<button id="themeToggle">🌙</button>
<main>
<h1>記事タイトル</h1>
<p>本文テキスト</p>
</main>
</body>生成されたCSS例
:root {
--bg: #fafafa;
--surface: #ffffff;
--text: #1a1a1a;
--text-muted: #6b6b6b;
}
body.dark {
--bg: #121212;
--surface: #1e1e1e;
--text: #e8e8e8;
--text-muted: #999;
}
body {
background: var(--bg);
color: var(--text);
transition: background 0.3s, color 0.3s;
}
#themeToggle {
background: none;
border: 1px solid currentColor;
border-radius: 20px;
padding: 4px 12px;
cursor: pointer;
font-size: 1rem;
}生成されたJS例
const btn = document.getElementById('themeToggle');
const body = document.body;
// 保存済みのテーマを読み込む
const saved = localStorage.getItem('theme');
if (saved === 'dark') {
body.classList.add('dark');
btn.textContent = '☀️';
}
btn.addEventListener('click', () => {
const isDark = body.classList.toggle('dark');
btn.textContent = isDark ? '☀️' : '🌙';
localStorage.setItem('theme', isDark ? 'dark' : 'light');
});📝 用語メモ
CSS変数（カスタムプロパティ）：--bg: #fafafaのように--から始まる変数。var(--bg)で使い回せます。一か所変えるだけでサイト全体の色が変わるので便利です。localStorage：ブラウザにデータを保存する仕組み。ページを閉じても消えません。
方法②：HTMLとセットで生成する
AIへのプロンプト例
ライト/ダークモードを切り替えられるシンプルなページをHTML・CSS・JavaScriptで作ってください。
CSS変数で色管理し、localStorageで設定を保存。
ボタンはトグルスイッチ型のデザインにしてください。ポイント
- OS設定をデフォルトにしたい場合は「
prefers-color-scheme: darkメディアクエリも使って」とリクエストできます - サイト全体への適用は、色をすべてCSS変数化しておくことが前提です
