アプリのダークモード対応方法【swift5 xcode11.6】

アプリを公開した際に、ユーザから「ダークモードだと文字が読めないよ」というようなご指摘を受けることがよくあります。この記事ではアプリのダークモード対応について解説いたします。

ダークモード非対応にする方法(暫定的な対応)

これから紹介するのは、あくまで暫定的な対応です。「もうアプリを公開してしまったから、取り急ぎ対応しないといけない」「ダークモードのデザインは後回しにしており、ひとまず対応せずに公開したい」という方におすすめです。

※現状(2020年12月現在)ではダークモードに対応しなくともアプリ審査には通ります。しかし、公式は強くダークモード対応を推奨していますので、今後のためにも早めに対応することをおすすめします。

以下に、ケースごとの対応を示します

ケース1:画面ごとにダークモードを回避

特定の画面のみダークモードで表示がおかしくなる際におすすめです。以下のコードを貼り付けることによって、常にライトモード(通常表示)とすることができます。

override func viewDidLoad() {
        super.viewDidLoad()

        //  ダークモードはiOS13から登場した機能のため、それ未満のバージョンについては対応しない。
        if #available(iOS 13.0, *) {

       //常にライトモードを指定する。ダークモードを回避する
            self.overrideUserInterfaceStyle = .light
        } 
        else{
            //iOS13未満のバージョンについて対応が必要であれば記載
        }

}

ケース2:アプリ全体でタークモードを回避

ダークモード対応すべき画面が多い際におすすめです。

Info.plistのコードを追加してください。アプリ全体がダークモード非対応になります

<key>UIUserInterfaceStyle</key>
<string>Light</string>

※Priolity LIst表示で選択することが出来なかったため、コードで記載。info.plistを右クリック→Open Asを選択→Source Codeを選択するとコード表示で編集できます。

ダークモードに対応する方法(正式な対応)

手順1:スマホがダークモードか通常モードかを判定する

まずは、UIColorクラスを拡張し、ダークモード時・ライトモード時に異なるUIColorを返すようにする。

以下のサンプルコードでは、ライトモードではUIColor:darkを、ダークモードではUIColor:lightを返しています。

//UIColorクラスを拡張
extension UIColor {
    public class func dynamicColor(light: UIColor, dark: UIColor) -> UIColor {
     //iOS13以上であれば、ダークモード対応する
        if #available(iOS 13, *) {
            return UIColor { (traitCollection) -> UIColor in
          //ダークモードであればUIColor:darkを返す
                if traitCollection.userInterfaceStyle == .dark {
                    return dark
                } else {
          //ライトモードであればUIColor:lightを返す
                    return light
                }
            }
        }
        return light
    }
}

手順2:表示設定を反映したUIColorを作成する

手順1のコードを元にしてダイナミックカラー(画面表示に合わせて色変わるUIColor)を生成します。以下のコードでは、ライトモードでは黒色を、ダークモードでは白色を指定しています。

//UIColorクラスを拡張
extension UIColor {
    //手順1のコード
    public class func dynamicColor(light: UIColor, dark: UIColor) -> UIColor {
     //iOS13以上であれば、ダークモード対応する
        if #available(iOS 13, *) {
            return UIColor { (traitCollection) -> UIColor in
          //ダークモードであればUIColor:darkを返す
                if traitCollection.userInterfaceStyle == .dark {
                    return dark
                } else {
                    return light
                }
            }
        }
        return light
    }
  //手順1のコードここまで

  //追記するコード。DynamicBackGroundColorというUIColorを作る
    public static var DynamicBackGroundColor: UIColor {
     //色を指定する。今回は通常モードならば黒、ダークモードならば白。
        return dynamicColor(
            light: .black,
            dark:  .white
        )
    }
    //追記するコードここまで
}

手順3:作成したダイナミックカラーを実際に利用する

あとは手順2で作成したダイナミックカラーを、任意のViewContorllerで指定するだけです。

//ダイナミックカラーをを指定するView
@IBOutlet weak var backGroundView: UIView!

override func viewDidLoad() {
        super.viewDidLoad()
        //背景色を手順2で作成したダイナミックカラーに指定。
     backGroundView.backgroundColor = UIColor.DynamicBackGroundColor
}

ダークモード対応は、制作工程の後半になるほど対応に時間がかかってしまいます!極力早めに対応することをお勧めします!

コメント

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