SwiftUI#

preferredColorSchemeかcolorSchemeを View に対してくっつけることで有効化できます。

var body: some Scene {
  WindowGroup {
    ContentView()
      .preferredColorScheme(.dark)
  }
}

もしくは、

var body: some Scene {
  WindowGroup {
    ContentView()
      .colorScheme(.dark)
  }
}

ということになります。どちらも引数にColorSchemeを取ります。これは.darkか.lightが指定できます。

が、現在は.colorSchemeは非推奨で.preferredColorSchemeの利用が推奨されています。じゃあこれは何が違うのかというと、colorSchemeは子 View にしか伝播しませんが、preferredColorSchemeは親にも伝播します。なので基本的にはアプリ内のどこか一箇所だけで使えば良いです。

ただし、注意点として.sheetや.fullScreenCoverで表示した別 View から Toggle の値を切り替えると親 View には即座に反映されますが、自身には反映されません。これだと挙動としておかしいので、このままだといけないわけですね。

UIKit#

UIKit の場合はUIUserInterfaceStyleで ColorScheme を指定します。ちなみにUIUserInterfaceStyleとColorSchemeは全く互換性がありません。なんでこんなややこしいことにしたのかは謎です。

UIWindowやUIViewControllerにはoverrideUserInterfaceStyleというプロパティが存在するのでこれを上書きしてしまえば指定した ColorScheme を反映されることができます。

一般的には指定されたUIViewControllerのテーマを変更するだけなのですがUIWindowsSceneに対して実行すれば全てのテーマを一気に変更することができます。

UIWindow#

ルートのUIWindowを取得するコードは以下の通り。最近この辺りは Deprecated になっているものが多いので、特に理由もなく以下のコードをコピペすればよいです。

extension UIApplication {
    public var window: UIWindow? {
        UIApplication.shared.connectedScenes.compactMap({ $0 as? UIWindowScene }).first?.windows.first
    }
}

これでアプリが利用しているUIWindowのうち、ルートのものがとってこれます。なので、

@main
struct DemoApp: App {
  @AppStorage("APP.CONFIG.DARKMODE") var isDarkMode: Bool = false

  var body: some Scene {
    WindowGroup {
      ContentView()
        .onChange(of: isDarkMode, perform: { newValue in
          UIApplication.shared.window?.overrideUserInterfaceStyle = newValue ? .dark : .light
        })
    }
  }
}

なので例えば上のように@main内でUIApplication.shared.window?.overrideUserInterfaceStyle = isDarkMode ? .dark : .lightとすればContentView以下の全ての View でテーマの変更が有効になります。データを保存しておくためにどちらのテーマを利用しているかは@AppStorageに保存しておきましょう。

このとき.preferredColorSchemeを同時に使うとこちらの設定が優先されて.sheetや.fullScreenCover内で Toggle を切り替えたときに変更が効かなくなります。ただこれだと、Toggle を切り替えたときにしかテーマの切り替えが効かなくなるので起動時にも反映されるようにします。

@main
struct DemoApp: App {
  @AppStorage("APP.CONFIG.DARKMODE") var colorScheme: UIUserInterfaceStyle = .dark

  var body: some Scene {
    WindowGroup {
      ContentView()
        .onChange(of: isDarkMode, perform: { newValue in
          UIApplication.shared.window?.overrideUserInterfaceStyle = newValue
        })
        .onAppear(perform: {
          UIApplication.shared.window?.overrideUserInterfaceStyle = colorScheme
        })
    }
  }
}

/// AppStorageにUIUserInterfaceStyleを突っ込めるようにする
extension UIUserInterfaceStyle: Codable {}

/// テーマを切り替えるToggle
struct ThemeToggle: View {
  @AppStorage("APP.CONFIG.DARKMODE") var colorScheme: UIUserInterfaceStyle = .dark

  var body: some View {
    Toggle(isOn: Binding(get: {
        colorScheme == .dark
      }, set: { newValue in
        colorScheme = newValue ? .dark  : .light
      }),
      label: {
        Text("DarkMode")
    })
  }
}

みたいな感じにすればこのトグルをどこに設置しても切り替えれば即座にアプリの全ての View のテーマが切り替わります。.preferredColorSchemeなんて使う必要なかったんだよなあ、うん。