meta要素のname=color-schemeについて

meta要素のname=color-schemeについて

ダーク・モードへ適応するなら、フォーム関連要素の色も切り替えるよう、CSSを書くだろう。しかし、それ...概要を表示 ダーク・モードへ適応するなら、フォーム関連要素の色も切り替えるよう、CSSを書くだろう。しかし、それだけでは、例えばテキストエリアで出てくるスクロールバーが明るいままなので、かなり浮いてしまう。meta要素でname=color-schemeを適切に設定すると、そういったスクロールバーの色も含めたあらゆるものの色を暗く(明るく)できる。 書き方は特に難しくない。ダーク・モードへ適応しようと、prefers-color-schemeメディア・クエリーを使って、明るい背景と暗い背景を切り替えるなら、以下のようにHTMLファイルのhead要素以下に書けばいい。viewportと似たようなものだ。 <meta name="color-scheme" content="light dark"> lightとdarkの順序は、逆でも意味は変わらない。これだけでユーザーのOSやブラウザーでのダーク・モー

• css
• html