iOS13から使えるようになったダークモード

2019-10-04   

オレのiPhoneはXSのままですがiOSは13になりました。ちょいちょい地味にバージョンアップされてるようですが、個人的に興味津津なのが「ダークモード」です。

基本iPhoneアプリは白っぽい背景ですが、ダークモードにすると黒背景に変わります。↓これはiOS純正のカレンダーアプリの画面。

@title@

夜間目に優しいっていうのがダークモード。有機ELディスプレイだとバッテリー保ちもよくなるとか。ちなみにiOS12の頃からも「色反転」はあったけど、あれはちょっと不自然でしたが、iOS13のダークモードはかなり見やすいので、オレは日中でもダークモードにしてます。

iOS13でダークモードにする方法

コントロールセンターを呼び出して↓赤丸の画面の明るさをタップ

@title@

画面左下の「ダークモードオン」をタップ。

@title@

これでiPhoneがダークモードになります。性格が悪くなるわけではありません。画面が暗くなります。

ただし、現時点では始まったばっかりなのでapple純正アプリ以外のアプリはあんまり対応してませんw いち早く対応してるのがツイッター純正アプリ。

@title@

↑ツイッターアプリ独自で夜間モード的なのは前からあったけど、今はiOSでダークモードにすればツイッターも自動で反転されます。

Windows10をダークモードにする方法

Windowsでも似た機能はあって、デスクトップの空いてるところを左クリック→個人設定

以下の画面の左メニューの「色」を選択し、画面右側を下にスクロールすると「既定のアプリ モードを選択します」部分を「黒」

@title@

これでWindowsもダークモードになります。が、ぱっと見はそんな変わりません。

ダークモードにした状態でGoogleChromeを開くとよくわかります。Chromeもダークモードに対応しています。

@title@

で、Chromeでツイッターを開くと↓こんな感じ。

@title@

あくまでもサイト運営者がダークモードに対応させてないと今までと同じ画面になります。今現在、web関係のサイト以外でダークモードに対応してるのはツイッター以外見たことないです。フェイスブックも未対応。


ってことで

サイト運営者がダークモードに対応する方法

自分のサイトをダークモードに対応するにはCSSをちょっといじる必要があります。ズバリの答えが以下ブログにかかれてます。これ読めば全て解決!

Webサイトをダークモードに対応させよう Webクリエイターボックス

キモはCSSのメディア特性「prefers-color-scheme」がダークモードかどうかの判断をしてくれるので

@media (prefers-color-scheme: dark) {
body {
background-color:ダークモード時の背景色

color: ダークモード時のテキスト色
}
}

↑たったこれだけでOK!素晴らしい。

ってことで上記サイトを参考にしてこのサイトもダークモードに対応してみました。

iPhoneでの表示

@title@

PC(Chrome)での表示

@title@

オレ自信が作っている部分は反転してるけど

Google広告↓

@title@

ツイッター埋め込み↓

@title@

これらがダークモードを検知しないので、ちょっとデザイン的にはイマイチですね今の所。Google社も今頃やっとこさ広告がレスポンシブ対応したくらいなので、広告のダークモード対応は何年かかることか・・・

更に課題は色々あって、

  • 例えばロゴマークなどを背景透明のPNGで作ってるとき境界線のアンチエイリアスが目立つ。※このサイトはSVGロゴなので問題なし。
  • SVGのバナーなどで白背景前提で文字を黒にしてる場合、ダークモードで読めなくなる。
  • ECサイトなんかで商品写真を白背景JPEGで載せてる場合、どーにもならない。今更透明背景PNGで再撮とか無理。
  • Bootstrapだとテーブルやnavbarに黒背景モードがあるけど、Bootstrap自体でprefers-color-scheme:を検知してくれないとだいぶキツイ。

ざっくりこんな印象ですが、まだまだ始まったばっかりの事なので、この先数年かけて普及していくことでしょう(・ω・)ノ

 

カテゴリ:日記・携帯更新

UNITORO以外の最近の投稿

N/A

twitter

Recent entries

8OtLFQ8HN0ezbKZQ.jpg

リチビー12V60Ahはバッカンにちょうどいい

@title@

amazonファイヤーTVでYouTubeアプリが復活!

@title@

ギター兼キーボードで2つ目のバンドに入ってみたが・・・

@title@

釣具メーカーホームページでカラー名が表示されないやつの対処方法

@title@

リチウムイオンバッテリーへの誤解

@title@

榛名湖のフットターボで2人乗りエレキが解禁されてた!

@title@

オレの買い(釣具以外)

sD3yAc7UZKninBFP.jpg

榛名湖なう

@title@

コインパーキングで盛大にボッタくられた・・・と、思ったら・・

@title@

フランクフルトモーターショー

@title@

さらばiTunes! Apple Musicがブラウザ再生に対応!β版の使い方

@title@

オレの旅「茨城県北浦」

@title@

茨城の名所!「あらいやオートコーナー」に行ってみた

@title@

ガーミンの次世代エレクトリックモーター「フォース」のネタをブログに書こうと思ったら

sXz4whQOzxc63h1t.jpg

今日の福島健

AnG1VnUX_YAPO9Li.jpg

今頃夏が来た

2iFyf0Z4ZXvtwcLY.jpg

橋脚マニアの血が騒ぐ

bQ7vwTxDjdgW257T.jpg

北浦なう

@title@

YouTuberの年収がわかるサイト「ソーシャルブレード」

X4YmJPPXQFaBO89I.jpg

久しぶりにマグフォースV使った結果w

@title@

デスアダー4インチ#108パールグリッターとキイロイのとフリックカーリー

@title@

[LINE緊急問題] スパムメールに敢えて釣られるシリーズ

j4jo1DV3tgT4rK3v.jpg

榛名湖なう

@title@

茨城県筑西市しもだて美術館に『江口寿史イラストレーション展 彼女』を見に行った

@title@

30年前の夏フェス「人生は上々だ」

@title@

初の右手を使う遊び!

@title@

RCMRのRGM LED付き RCMRver. 黒を買ってみた

@title@

安全運転に!タイヤ空気圧センサーTPMSが4000円くらいで買える&後付のシートベンチレーション

@title@

元バンドやってたおじさん達!再開してみませんか?

@title@

こんなクルマのコーティング屋ヤダw

Category

Popular entries 2018

Popular entries 2017

Popular entries 2016