CSS

Automatically switches design based on the user's dark or light mode setting.

prefers-color-scheme

prefers-color-schemeは、ユーザーのOSやブラウザが「ダークモード」か「ライトモード」かをCSSで自動的に判断し、それに合わせてデザインを切り替えるための仕組みです。

たとえば、ダークモードを使っている人には暗い背景のデザイン、ライトモードの人には明るい背景のデザインを自動で表示できます。

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

このように、ユーザーの設定に合わせて見やすく、快適なデザインを提供できます。