スマホやPCでダークモードが使われるのも一般的になってきた今、WEBサイトもダークモード切替ができるようにしたい方必見のCSSタグを紹介します。

とても簡単に設定できるのでぜひお試しください。

prefers-color-scheme

今回使うタグはprefers-color-schemeです。

prefers-color-schemeはメディア特性で、デバイスの状態（ライト、ダーク）に合わせてCSSを分けることができます。

使い方

では、実際に使い方を紹介します。

ライトの場合

@media (prefers-color-scheme: light){
	body{
		background-color: #fff;
		color: #111;
	}
}

ダークの場合

@media (prefers-color-scheme: dark){
	body{
		backgroud-color: #111;
		color: #fff;
	}
}

@media (prefers-color-scheme: light か dark)を最初に書くだけです!

普段はライトを基準にCSSを書いていると思うので、darkだけ書くのもありかと...

コーポレートサイトやブランドサイト、ECサイトなどは色を変えるのが大変なので、オウンドメディア等で使うのが個人的にはおすすめです。

ぜひお試しください。