アプリを公開した際に、ユーザから「ダークモードだと文字が読めないよ」というようなご指摘を受けることがよくあります。この記事ではアプリのダークモード対応について解説いたします。
ダークモード非対応にする方法(暫定的な対応)
これから紹介するのは、あくまで暫定的な対応です。「もうアプリを公開してしまったから、取り急ぎ対応しないといけない」「ダークモードのデザインは後回しにしており、ひとまず対応せずに公開したい」という方におすすめです。
※現状(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
}
ダークモード対応は、制作工程の後半になるほど対応に時間がかかってしまいます!極力早めに対応することをお勧めします!
コメント