Webサイトをダークモードに対応させよう

2020年10月16日 CSS, JavaScript ダークモードとは画面の背景を黒基調にしたデザインのこと。OS側での設定の他、人気アプリやWebサイトで続々対応されています。これまでは明るい部屋でモニターを眺めることが多かったのですが、スマートフォンの普及で暗い場所でも画面を見る機会が増え、夜間目に優しいダークモードが増えてきているわけですね。有機ELディスプレイでは省エネにもなるそうです。今回はそんなダークモードの設定を紹介します！ とにかく夜間見えづらい！ 私、夜間に車を運転していると、暗い所では対向車のライト以外ほとんど何も見えない状態なんですが、みんなそんなもんだと思ってたんですよね。でも話しているとどうやら私以外の人はライトじゃない部分もちゃんと見えていると…。みんな見えてるからちゃんと運転できてるってことか！こりゃー私には危険だわってことで夜間の運転はやめました。運転して

[call_me_nots]

大事→“ダークモードへの対応はとっても簡単。prefers-color-scheme というメディア特性を利用し、その中にダークモード時に適用したいCSSを書くだけ”

[lifeisadog]

仕事増やさんといて！ただでさえタブレット対応も当然ですよね費用変わりませんよねって言われるのに

[issyurn]

“ダークモードへの対応はとっても簡単。prefers-color-scheme というメディア特性を利用し、その中にダークモード時に適用したいCSSを書くだけ！ ”

[Nyoho]

@media (prefers-color-scheme: dark) { }

[twol]

最近の記事だった。SEOつえー

[localnavi]

暗闇では目が痛いのでスマホを触らないようにしてるからダークモードの存在すら気付いてなかった。とりあえず「Darkmode.js」を導入できるプラグインから試してみよう。

[enct]

ダークモードがあるサイトは全部ダークモードにしてるけど、残念ながら現代のwebはだいたい白ベースなので、暗闇に白い画像が浮いて眩しい

[shiromatakumi]

仕事増えてこっちが暗くなるわい

[primedesignworks]

対応できるって知らんかった！ありがとうございます！

[ayumun]

勝手にOS側で白黒反転するのかと思ってた。しないのか

[klim0824]

CSS変数で切り替える発想はなかった／OSのUIをダークモードにしたい人＝ウェブページもダークモードで見たい人 とは限らないと思っているので、積極的に対応する気が起きない

[toaruR]

prefers-color-scheme: dark

[raebchen]

あー、自分も明るいスマホの画面に目をやられるから夜間はゼロまで落とすけど、それ、自分でコントロールしたいわけで、Gmailの夜間モードのあるテーマは非常に鬱陶しい😓

[maangie]

あーなるほど。カーナビをスマホにしてると反射がアレだよな。そういう需要なのか (←ソコからかっ

[hisawooo]

はてなアプリも対応はよ

[buhoho]

いやどす。userstyleで勝手にやってどうぞ / と思ってましたけど、対応しましたw。記事大変参考になりました(手のひらくるくる)

[tsuki-rs]

prefers-color-scheme: dark の中には optgroupも設定した方が良さそうだった。optgroupのラベル部分がダークモードだと黒文字で見にくかった為。