KOSEN{BLOG}について

Swift Tips ダークモード実装編{たった2ステップでダークモード?!}

iOS 13から,UI全体を目に優しい黒基調にする「ダークモード」を追加してよくスマホの画面を見る人にとっては嬉しいアップデートだったのではないでしょうか.

しかし,アップデートには犠牲はつきものでダークモード に対応させるための時間と知識が必要になってきます.

実際ダークモードをしようした場合このようになる.

そこで,今回はダークモード に対応させるためのたった2つの手順を2つ紹介したいと思う.

やってみたらとても簡単なのでぜひ試してください!

たった二行でダークモードに変更?Assetsをうまく活用すべし!

早速ダークモードを使ってプログラムしていこう.

  • ProjectからAssets.xcassetsを選択
  • 下にある + ボタンから New Color Setを選択

Color Setの設定

Attributes Inspectorに移動して,

  • Color Setの名前をColorに変更する.
  • AppearancesをAny,Light,Darkに変更

ダークモードに設定したい色を指定

以上でAssetsの設定は終わり,実際にこのColor Setをしようするためにプログラムを書いていく.

ダークモードを設定するためのコード

iOSの場合

if #available(iOS 11.0, *) {
 cell.textLabel?.textColor = UIColor(named: "Color") 
  } else { // ダークモードを使用できない以前のバージョンの時の色設定
}

macOS(OSX)の場合

 if #available(OSX 10.14.2, *) {
          cell.textLabel?.textColor = NSColor(named: "Color")
              } else { // ダークモードを使用できない以前のバージョンの時の色設定
            }

今回はTableViewのcellのテキストの色をダークモードの際に白にするように設定しました.しかし,そのまま textColor = White にするのではなく,

先ほど設定したAssetColorを使用する.

UIColor(named: “自分で作ったColorAsset名”)

これを入力すれば完了します.

いざ実装!

はい.これでダークモードが実装できました.
感想をいうと意外と簡単にできたと思う.

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です