こんにちは。ましじめの田村です。
OSのカラーテーマを設定出来るようになり、アプリなど「ダークモード」が増えてきました。
今後Webサイトも「ダークモード」に対応したいという要望が出てきそうです。
Webサイトはメディアクエリを使ってCSSを設定すると選択したカラーテーマに合わせてスタイルを変更することが可能です。
対応ブラウザはIE、Edgeは未対応ですが
Can I use... を見るところ次期Chromium版のEdgeからは「ダークモード」に対応できてるようです。
最新ブラウザをターゲットとするのであれば使用出来そうです。
また、ダークモードに対応したい場合は次の記述で実現可能です。
@media (prefers-color-scheme:light) {
/* ライトモード用のスタイル */
}
@media (prefers-color-scheme:dark) {
/* ダークモード用のスタイル */
}
CSSでダークモードに対応する場合参考にしてみてください。
以上「CSS ダークモードに対応する」でした。
関連するタグ
全 1 件中 1 〜 1 件目を表示
この記事を書いた人
たむら しょうご
HTML&CSSコーダー
ウェブアクセシビリティ対応、フロントエンド開発、CMSを利用したウェブサイト制作を担当しています。
趣味はガーデニングです。