2コマでわかるDarkMode対応

先日リリースしましたアプリのダークモード化に挑戦しました。

 

毎度の事ながら、既にたくさんの方々がダークモード化の記事を書いておられまして、もう書くようなことはない気もするのですが。

 

でも書いちゃいます。

 

サクサクいきましょう。

2コマでわかるダークモード対応

f:id:NNkamura_Enginieer:20191024233148p:plain

色用のAssetsを作成して、それぞれの役割の色(背景用、文字用など)を作ります。

 

f:id:NNkamura_Enginieer:20191024233434p:plain

storyboardで作ったColorを設定します

 

f:id:NNkamura_Enginieer:20191024233542p:plain

変わった!

 

iOS Deployment Targetが古いとできないらしいです。

その辺りは…2コマでは収まらないので…調べてみてください…

 

やり方はわかったけど何色にすればいいの?(デザイナーがいない!)

 

①背景の色を決める(私はFinderの黒さが好きなので、この色情報を取得)

f:id:NNkamura_Enginieer:20191024234053p:plain

Macの画面内にある色をスポイトで取れるやーつ

コントラストチェッカーにて、見えやすい色を探す

https://contrastchecker.com/

③不安になったら謎のサイトでサンプルを見てみる

https://darkmodelist.com/ios/

④Storyboardでこまめに確認したいときはここ

f:id:NNkamura_Enginieer:20191024234545p:plain

ダークモードのプレビューをビルドせずに見れる

簡単ですね!どの色がいいかなと考えながら弄るのは楽しくて、デザイナーに任せるのが勿体無いくらいです。個人開発の醍醐味だ。

 

 

ここに書いてあることは皆様が既にまとめてくださっています!ありがとうございました!

https://qiita.com/gonsee/items/c04b73787730c0e831df

https://qiita.com/hirothings/items/4834481d170332e173f5

https://qiita.com/shtnkgm/items/3dfaf126c286fd098f10

 

宣伝だ

ちなみに、ここでいじっている自己開発アプリというのがこちらになります。

https://twitter.com/NNkamura/status/1186193346328293376

ダイエット・筋トレ用の食事管理アプリです。よかったら入れてみてください。

※本アプリ、ダークモードは10/24現在、未対応です。

 

おしまい。