Swiftでダークモードを簡単に実装する10のステップ

はじめに
●ダークモードとは
- ○ダークモードの意義とメリット
- ○iOSでのダークモードの普及
●Swiftにおけるダークモードの基本
- ○User Interface Styleの認識
- ○システムの色を活用する
●Swiftでのダークモードの実装ステップ
●ダークモードの応用例
●注意点と対処法
- ○色のコントラストに関する考慮
- ○画像やアイコンの選定
●ダークモードのカスタマイズ方法
まとめ

はじめに

アプリを開発する上で、ユーザーの目を守るため、また見た目のバリエーションを増やすためにダークモードの実装は欠かせない要素となりました。

この記事を読めば、Swiftを使用してダークモードの実装をマスターすることができるようになります。

Swiftでアプリケーションにダークモードを導入したい初心者の方、または実装の方法を再確認したい方へ向けて、基本から応用、カスタマイズの方法まで詳しく解説していきます。

●ダークモードとは

ダークモードは、画面の明るさを抑えることで目の疲れを軽減したり、バッテリーの消費を抑える効果があります。

特に夜間や暗い場所での使用時に、画面の明るさが目立たないように調整されるので、目への負担が軽減されます。

○ダークモードの意義とメリット

ダークモードは、近年のスマートフォンやPCのOSで標準搭載されるようになり、多くのユーザーに受け入れられています。

明るい背景に黒字のテキストではなく、暗い背景に白字のテキストという配色は、長時間の使用でも目の疲れを感じにくいとされています。

また、OLEDディスプレイを搭載したデバイスでは、黒を表示する際にピクセルを消灯させることができるため、バッテリーの節約にも繋がります。

○iOSでのダークモードの普及

AppleはiOS 13からダークモードをサポートし始めました。

これにより、アプリケーション開発者もダークモードの対応を進めています。

Swiftでアプリケーションを開発する際には、ダークモードをサポートすることがユーザー体験の向上に繋がります。

Appleの公式ドキュメントやサンプルアプリを参考にしながら、ダークモードの対応を進めることがおすすめです。

このコードでは、Swiftでダークモードが有効かどうかを判定するコードを紹介します。

この例では、traitCollectionを使用してユーザーインターフェースのスタイルを確認し、ダークモードが有効かどうかを判定しています。

if traitCollection.userInterfaceStyle == .dark {
    print("ダークモードが有効です")
} else {
    print("ダークモードは無効です")
}

このコードを実行すると、ダークモードが有効の場合は「ダークモードが有効です」と出力され、無効の場合は「ダークモードは無効です」と出力されます。

●Swiftにおけるダークモードの基本

Swiftでダークモードを実装するには、いくつかの基本的な考え方やステップが存在します。

まずは、Swiftにおけるダークモードの基本から学ぶことで、後の応用やカスタマイズがスムーズに行えるようになります。

○User Interface Styleの認識

SwiftやiOSでは、ユーザーインターフェースのスタイルをUITraitCollectionのuserInterfaceStyleプロパティを通じて確認することができます。

このプロパティは、アプリが現在ダークモードであるか、ライトモードであるかを知る上で非常に役立ちます。

このコードでは、Swiftを使用して現在のUser Interface Styleを確認しています。

この例では、userInterfaceStyleプロパティを使って、現在のモードがダークモードかライトモードかを判定しています。

if traitCollection.userInterfaceStyle == .dark {
    print("現在、ダークモードです")
} else {
    print("現在、ライトモードです")
}

上記のコードを実行すると、ダークモードが有効の場合、「現在、ダークモードです」と出力され、ライトモードの場合、「現在、ライトモードです」と出力されることが期待されます。

これをベースに、アプリ内でのモード切替の処理やデザイン調整を行うことができます。

○システムの色を活用する

iOS 13以降、システムが提供する色を使うことで、自動的にダークモードとライトモードの切り替えに対応することができます。

これは、UIColorのシステムカラーを利用することで実現されます。

このコードでは、Swiftを使用してシステムの色を取得し、それを背景色として設定する方法を紹介します。

この例では、systemBackgroundというシステムカラーを使って、ビューの背景色を設定しています。

view.backgroundColor = UIColor.systemBackground

このコードを使用することで、ダークモード時には暗い背景色が、ライトモード時には明るい背景色が自動的に設定されます。

●Swiftでのダークモードの実装ステップ

Swiftを利用してアプリケーションにダークモードを取り入れる際、具体的な実装ステップが必要となります。

ここでは、ダークモードを実装するための具体的な手順とサンプルコードを2つ紹介します。

○サンプルコード1：ダークモードの判定方法

まず最初に、アプリケーションが現在ダークモードを使用しているのかどうかを判定する方法について説明します。

このコードでは、Swiftを使ってUITraitCollectionのuserInterfaceStyleプロパティを利用し、アプリの現在のモードを判定しています。

if traitCollection.userInterfaceStyle == .dark {
    // ここにダークモード時の処理を記述
} else {
    // ここにライトモード時の処理を記述
}

上記のコードを利用すると、ユーザーがダークモードを有効にしている場合とライトモードを使用している場合で、異なる処理やデザインの適用が可能となります。

○サンプルコード2：ダークモード専用の色の設定

ダークモードをサポートするためには、モードごとに適切な色を使用することが必要です。

iOS 13以降では、システムの色に加えて、ダークモードとライトモードで異なる色を持つカラーセットを定義することができます。

このコードでは、Asset Catalogにてダークモードとライトモードの両方に対応したカラーセットを作成し、それをSwiftで読み込む方法を紹介します。

まず、Asset Catalogに新しいColor Setを追加し、Inspector PaneからAppearanceオプションを「Any, Dark」と設定します。

次に、ライトモード用の色とダークモード用の色をそれぞれ設定します。

Swiftのコード内でこのカラーセットを使用するには、次のように記述します。

let customColor = UIColor(named: "カラーセットの名前")
view.backgroundColor = customColor

このコードを実行すると、ユーザーがダークモードを使用している場合には、先ほどAsset Catalogで設定したダークモード専用の色が背景色として適用され、ライトモードの場合にはライトモード用の色が適用されます。

○サンプルコード3：ダークモード時の画像の切り替え

ダークモードとライトモード、両方の環境で最適なビジュアル体験を提供するためには、モードに応じて画像を切り替えることも考慮すべきです。

特に背景が透明な画像や色のコントラストが強い画像は、モードによって見え方が大きく変わる可能性があるため、注意が必要です。

このコードでは、Asset Catalogを使用してダークモードとライトモードの両方に対応した画像セットを作成し、それをSwiftで読み込む方法を紹介します。

まず、Asset Catalogに新しいImage Setを追加し、Inspector PaneからAppearanceオプションを「Any, Dark」と設定します。

次に、ライトモード用の画像とダークモード用の画像をそれぞれ設定します。

Swiftのコード内でこの画像セットを使用するには、次のように記述します。

let customImage = UIImage(named: "画像セットの名前")
imageView.image = customImage

この例では、UIImageクラスを使用してAsset Catalogに保存されている画像を読み込んでいます。

ユーザーがダークモードを使用している場合、先ほどAsset Catalogで設定したダークモード専用の画像が表示され、ライトモードの場合にはライトモード用の画像が表示されます。

○サンプルコード4：ダークモードの切り替えアクションの追加

ユーザーがアプリ内でダークモードとライトモードを手動で切り替えられるようにする機能も、一部のアプリケーションで実装されています。

このような機能を提供することで、ユーザーの好みや利用シーンに合わせて表示モードを選択できるため、使い勝手が向上します。

下記のコードは、ボタンのアクション内でダークモードとライトモードを切り替えるサンプルを表しています。

@IBAction func switchModeAction(sender: UIButton) {
    if overrideUserInterfaceStyle == .dark {
        overrideUserInterfaceStyle = .light
    } else {
        overrideUserInterfaceStyle = .dark
    }
}

この例では、overrideUserInterfaceStyleプロパティを使用して、アプリの表示モードを手動で切り替えています。

ボタンをタップすることで、現在のモードとは逆のモードに切り替わります。

●ダークモードの応用例

ダークモードは、シンプルに背景を黒くするだけではなく、さまざまな応用が可能です。

ここでは、ダークモードをさらに魅力的に使うための応用例として、動的テーマ変更、特別なアニメーション効果、フォントスタイルの変更の3つを紹介します。

○サンプルコード5：ダークモードを利用した動的テーマ変更

ダークモードとライトモードでは、テーマカラーを変更することで、アプリの見た目を更に引き立たせることができます。

ここでは、ダークモード時には深い青、ライトモード時には明るい青をテーマカラーとして設定する方法を紹介します。

if traitCollection.userInterfaceStyle == .dark {
    // ダークモード時のテーマカラー
    view.backgroundColor = UIColor(red: 0.0, green: 0.0, blue: 0.5, alpha: 1.0)
} else {
    // ライトモード時のテーマカラー
    view.backgroundColor = UIColor(red: 0.7, green: 0.8, blue: 1.0, alpha: 1.0)
}

このコードでは、traitCollection.userInterfaceStyleを使って現在のモードを判定し、それに応じて背景色を変更しています。

○サンプルコード6：ダークモード時の特別なアニメーション効果

ダークモードでは、独自のアニメーションを適用することで、一般的なライトモードとは異なる印象をユーザーに与えることができます。

下記の例では、ダークモード時にボタンの押下アニメーションを特別なものに変更しています。

let button = UIButton(type: .custom)
if traitCollection.userInterfaceStyle == .dark {
    // ダークモード時の特別なアニメーション
    button.addTarget(self, action: #selector(darkModeAnimation), for: .touchUpInside)
} else {
    // ライトモード時の通常アニメーション
    button.addTarget(self, action: #selector(lightModeAnimation), for: .touchUpInside)
}

上記のコードは、traitCollection.userInterfaceStyleを使ってモードの判定を行い、それに基づいて異なるアニメーションをボタンに適用しています。

○サンプルコード7：ダークモード時のフォントスタイルの変更

ダークモードの利用を最大限に生かすために、テキストのフォントやスタイルも変更することを考えることができます。

例として、ダークモード時にはフォントを太くしてテキストを強調する方法を以下に示します。

let label = UILabel()
if traitCollection.userInterfaceStyle == .dark {
    // ダークモード時のフォントスタイル
    label.font = UIFont.boldSystemFont(ofSize: 20)
} else {
    // ライトモード時のフォントスタイル
    label.font = UIFont.systemFont(ofSize: 20)
}

このコードでは、ダークモードとライトモードでのフォントの太さを変えています。

ダークモード時にはboldSystemFontを使用して、テキストを強調しています。

●注意点と対処法

ダークモードの実装はユーザーエクスペリエンスを向上させる魅力的な機能ですが、実装に際してはいくつかの注意点が存在します。

適切なコントラストや素材の選定は、ユーザーにとっての視認性や使い心地に直結するため、これらのポイントを理解し、適切に対応することが求められます。

○色のコントラストに関する考慮

ダークモードでは背景が暗くなることから、文字やアイコンの色を適切に選択することが非常に重要です。

背景とのコントラストが低いと、文字が読みづらくなったり、ボタンが押しづらくなる可能性があります。

下記のサンプルコードでは、ダークモード時の背景色とテキストの色を適切に設定して、コントラストを確保しています。

if traitCollection.userInterfaceStyle == .dark {
    // ダークモード時の背景色とテキストの色
    view.backgroundColor = UIColor.black
    label.textColor = UIColor.white
} else {
    // ライトモード時の背景色とテキストの色
    view.backgroundColor = UIColor.white
    label.textColor = UIColor.black
}

このコードでは、ダークモード時に背景を真っ黒にし、テキストを真っ白に設定しています。

このように、明瞭なコントラストを保つことで、読みやすさを確保します。

○画像やアイコンの選定

ダークモードにおいては、画像やアイコンも適切に選定することが求められます。

特に、透過性のある画像やアイコンは、背景色によっては意図しない見た目になる可能性があります。

そのため、ダークモード専用の画像やアイコンを用意することも一つの方法となります。

下記のサンプルコードは、ダークモードとライトモードで異なるアイコンを表示しています。

if traitCollection.userInterfaceStyle == .dark {
    // ダークモード時のアイコン
    iconImageView.image = UIImage(named: "darkModeIcon")
} else {
    // ライトモード時のアイコン
    iconImageView.image = UIImage(named: "lightModeIcon")
}

このコードでは、traitCollection.userInterfaceStyleを使用してモードを判定し、それに応じて異なるアイコンを表示しています。

●ダークモードのカスタマイズ方法

ダークモードはiOSの標準機能として提供されていますが、そのまま適用するだけでなく、アプリケーション独自のカスタマイズを行うことで、ユーザー体験をさらに高めることができます。

ここでは、Swiftを使用したカスタマイズ方法を3つのステップで解説いたします。

○サンプルコード8：独自のテーマカラーの定義

標準のダークモードの色設定だけでなく、ブランドカラーやデザインテーマに合わせた独自の色を設定することができます。

下記のサンプルコードは、ダークモード時に独自のテーマカラーを適用する方法を表しています。

extension UIColor {
    static let customDarkModeColor = UIColor(red: 0.2, green: 0.2, blue: 0.2, alpha: 1.0)
    static let customLightModeColor = UIColor(red: 0.9, green: 0.9, blue: 0.9, alpha: 1.0)
}

if traitCollection.userInterfaceStyle == .dark {
    // ダークモード時の独自の背景色
    view.backgroundColor = UIColor.customDarkModeColor
} else {
    // ライトモード時の独自の背景色
    view.backgroundColor = UIColor.customLightModeColor
}

このコードでは、UIColorの拡張を通じて、ダークモードとライトモードそれぞれのカスタムカラーを定義しています。

そして、traitCollection.userInterfaceStyleで現在のモードを判定し、背景色を設定しています。

○サンプルコード9：ダークモード時のサウンド変更

ダークモード時に独自のサウンドを鳴らすことで、ユーザーに視覚だけでなく聴覚でもダークモードの切り替えを認識させることができます。

下記のサンプルコードは、ダークモード時に特定のサウンドを再生する方法を表しています。

import AVFoundation

var audioPlayer: AVAudioPlayer?

if traitCollection.userInterfaceStyle == .dark {
    // ダークモード時のサウンドファイル
    if let soundURL = Bundle.main.url(forResource: "darkModeSound", withExtension: "mp3") {
        audioPlayer = try? AVAudioPlayer(contentsOf: soundURL)
        audioPlayer?.play()
    }
}

このコードでは、AVFoundationフレームワークを利用して、ダークモード時に特定のサウンドを再生しています。

必要に応じて、ライトモード時のサウンドも同様に設定することができます。

○サンプルコード10：ユーザーの選択によるテーマの変更

ダークモードの導入に加え、ユーザーがアプリケーション内でテーマを選択できるようにすることも考えられます。

このサンプルコードは、ユーザーの選択によってテーマカラーを変更する方法を表しています。

let userSelectedTheme = UserDefaults.standard.string(forKey: "UserSelectedTheme")

switch userSelectedTheme {
case "BlueTheme":
    view.backgroundColor = UIColor.blue
case "GreenTheme":
    view.backgroundColor = UIColor.green
default:
    view.backgroundColor = UIColor.systemBackground
}

このコードでは、UserDefaultsを使用してユーザーが選択したテーマの情報を取得し、その情報に基づいて背景色を変更しています。

ユーザーがテーマを選択するたびに、この設定が保存されるため、次回アプリを起動した際も同じテーマが継続して適用されます。