こんにちは、ワタナベです。
今回はcssでWEBサイトをダークモードに対応させる方法の備忘録です⸜(๑’ᵕ’๑)⸝
私もスマホはダークモード設定にして使用しております！
SAMPLE
See the Pen
Untitled by Akiho (@wcaotdaenpaebne)
on CodePen.
↑ライトモードにしていると白背景に黒文字、ダークモードにしていると黒背景に白文字になっていると思います。
是非確認してみてください꒰ ∩´∇ `∩꒱
@media (prefers-color-scheme: dark) {
/* ここにダークモード時に反映したいスタイルを記入 */
}
↑の中にダークモードの時に反映したいCSSを書くと、ダークモードの時にそのスタイルになります。
ダークモード設定が必要な場面はそう多くないですが、夜によく閲覧されるサイト、長時間見られるページ等はあるとうれしいかもですね( ⁎ᵕᴗᵕ⁎ )❤︎
▼THANKS！
それではまた次回。
ご閲覧ありがとうございました |ω･)و✧
