Swift - テーマカラー変更機能を実装する方法

作るもの

テーマ変更ページを作成し、テーマを選択するとアプリ全体の色が変わる機能を実装します。

完成イメージ

事前準備

テーマカラー用の色を6色用意しました。

Storyboardはこんな感じで、「ThemeView」と書かれたボタンを押すとテーマ変更ページに遷移するようになっています。

完成コード

ViewController.swift

import UIKit

class ViewController: UIViewController {
    
    @IBOutlet weak var button: UIButton!
    @IBOutlet weak var image: UIImageView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    override func viewWillAppear(_ animated: Bool) {
        let theme = UserDefaults.standard.object(forKey: "Theme") as? Int ?? 1
        let appearance = UINavigationBarAppearance()
        appearance.backgroundColor = UIColor(named: "AccentColor\(theme)")
        appearance.titleTextAttributes = [NSAttributedString.Key.foregroundColor : UIColor.white]
        navigationController?.navigationBar.standardAppearance = appearance
        navigationController?.navigationBar.scrollEdgeAppearance = appearance
        button.backgroundColor = UIColor(named: "AccentColor\(theme)")
        image.tintColor = UIColor(named: "AccentColor\(theme)")
    }
    
}

ThemeViewController.swift

import UIKit

class ThemeViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
    @IBAction func buttonTapped(_ sender: UIButton) {
        UserDefaults.standard.set(sender.tag, forKey: "Theme")
        navigationController?.popToRootViewController(animated: true)
    }
    
}

ポイント

テーマ情報の保存

ThemeViewController.swift

UserDefaults.standard.set(sender.tag, forKey: "Theme")

テーマ変更ページの全てのボタンには1〜6のTagが設定されています。
ボタンを押すとそのタグの番号がUserDefaultsに保存されるようにしています。
テーマカラーはUserDefaultsに保存しているので、アプリを閉じても保持されます。

Viewの更新

ViewController.swift

override func viewWillAppear(_ animated: Bool) {
    let theme = UserDefaults.standard.object(forKey: "Theme") as? Int ?? 1
    let appearance = UINavigationBarAppearance()
    appearance.backgroundColor = UIColor(named: "AccentColor\(theme)")
    appearance.titleTextAttributes = [NSAttributedString.Key.foregroundColor : UIColor.white]
    navigationController?.navigationBar.standardAppearance = appearance
     navigationController?.navigationBar.scrollEdgeAppearance = appearance
    button.backgroundColor = UIColor(named: "AccentColor\(theme)")
    image.tintColor = UIColor(named: "AccentColor\(theme)")
}

画面が表示されるたびに呼び出される「viewWillAppear」の中でUserDefaultsに保存されたテーマ番号を読み取り、全てのViewに反映させています。

ナビゲーションバー

let appearance = UINavigationBarAppearance()
appearance.backgroundColor = UIColor(named: "AccentColor\(theme)")
appearance.titleTextAttributes = [NSAttributedString.Key.foregroundColor : UIColor.white]
navigationController?.navigationBar.standardAppearance = appearance
navigationController?.navigationBar.scrollEdgeAppearance = appearance

この箇所はナビゲーションバーの色を変えるためのものです。