CSSでダークモードに即対応。OSの画面設定をウェブでも利用しよう!

CSS
この記事は約1分で読めます。
スポンサーリンク

海外のサイトとか見てると、自分のiphoneの設定をダークモードにしてる時、勝手に暗いデザインで表示されてるのを見てどうやってやってるのか疑問だった。
きっとjsでデバイス情報を取得して、なにかしてるんだろうと思ったけど違った。
CSSだけでできちゃうんだ!
ダークモードに対応したい時は、下のCSSをコピペして使ってね!

CSS

@media (prefers-color-scheme: dark) {
  // ここにデバイス設定が「ダークモード」の時の記述をします。
  body {
    background: #000;
    color: #fff;
  }
}

CSSのメディアには、レスポンシブでの記述以外にもこんな使い方があるんだ。
ダークテーマの時は「prefers-color-scheme: dark」で、あまり使うことが無いけど元々の明るいテーマの時は「prefers-color-scheme: light」でメディアクエリすれば、デバイスの画面設定と同期できちゃうよ!

SNSフォローボタン
エンデ・バタローをフォローする
CSSサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

タイトルとURLをコピーしました