【HTML CSS】WEBサイトを『ダークモード 』に対応させる方法！Dark Mode

[@tora_bim]

マジでヒロコードさん、初学者の味方なんで、これからも頑張ってください！！

[@hirocode]

そういっていただけてめちゃめちゃ嬉しいです😭 参考になるような動画たくさん出していけるように頑張ります🙇‍♂️❗️

[@user-fguhiasvhjvbajkfjkbnas]

ユーザーがボタンで自由に切り替えられるようにするにはどうすればいいでしょうか システムの設定に基づくのではなく、ボタンクリックでライトとダークを即座に切り替えられるようにしたいです。 あと、チャンネル登録させていただきました

[@hirocode]

ありがとうございます😆❗️ ユーザー側でテーマ変更させるには、javascriptが必要になってきます💦 少し難しいかもですが、例えば、CSS側ではdata属性ごとにカスタムプロパティの値を指定をしておいて、javascript側でdata属性の値を切り替える処理を行うイメージです。 ユーザーがページ遷移すると変更がリセットされるので、切り替えた内容をローカルストレージへ保存させる必要もあります🙇‍♂️！

[@omomherohero]

いつも役立つ内容、ありがとうございます。 @media (prefers-color-scheme:dark) これだけで切り替えできたんですね～色々試してみたいと思います。

[@hirocode]

意外と簡単にできますよね😊♪ こちらこそご視聴いただきありがとうございます🙇‍♂️❗️