はじめに WEBサイトにダークモードを実装する際に調べたことの覚書です。 以下のような内容です。 OSの設定によってCSSのメディアクエリでスタイルを適用する 切り替えスイッチによるモードの変更 おまけ:Tailwind CSSでダークモード 今回作成したコードの全体は以下になります。 CSSのメディアクエリでスタイル適用する 最初に、OSで設定されたモードによって、CSSのメディアクエリprefers-color-schemeで適用するスタイルを切り替える方法です。:rootに変数で色を指定して利用しています。 :root { --cBackground: #fedfe1; --cText: #656765; } /* OSの設定がダークモード時のスタイル */ @media (prefers-color-scheme: dark) { :root { --cBackground: #6