やってみよう右上の太陽・月のボタンを押してみてください
ボタン・操作部品メジャー（よく見る）
ダークモード切り替え
Theme Toggle / Dark Mode Switch
太陽と月のボタンを押すと、画面全体が明るい色と暗い色の間で切り替わる。
別名ダークモードテーマ切り替えライト／ダーク切り替え外観モード
どこで使われている？
- よく見かける場所
- X、YouTube、Slack、プログラミング向けのツール、多くのWebサイト
- 使うとよい場面
- 夜に使う人や、目を休めたい人に配慮したいとき
- 避けたい場面
- 配色の確認をしていないのに切り替えだけ付けること（読みにくくなる）
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。
HTML / CSS / JavaScript で「ダークモード切り替え（Theme Toggle / Dark Mode Switch）」を実装してください。 動き：右上に太陽と月のアイコンのボタンを置き、押すと画面全体の配色を明るいテーマと暗いテーマで切り替える。色はなめらかに変化させ、選んだテーマは次に開いたときも覚えておく。最初は端末の設定（ライト／ダーク）に合わせる。 使う部品：prefers-color-scheme と data-theme の切り替え
もっと詳しく：プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | prefers-color-scheme と data-theme の切り替え |
|---|---|
| iPhoneアプリなら | .preferredColorScheme(.dark) |
| Androidアプリなら | MaterialTheme の colorScheme を切り替え（isSystemInDarkTheme） |
| Flutterなら | MaterialApp の themeMode |
| React Nativeなら | useColorScheme（Appearance） |