SwiftUI のダークモードプレビュー時の不具合を回避する

April 9, 2020 (over 1 year ago)

追記

  • 2021-08-24: Xcode 12 では本記事で説明している不具合は解消されているため、対応の必要はありません。

SwiftUI の PreviewProviderGroup を使うことで複数のプレビューを同時に生成することができます。

struct ContentView_Previews: PreviewProvider {
static var previews: some View {
Group {
ContentView().environment(\.colorScheme, .dark)
ContentView().environment(\.colorScheme, .light)
}
}
}
swift

しかし、実際に Canvas に表示されるプレビューを見てみると、 .dark を設定したはずの View の background は白くなってしまっています。

これは既知の不具合で、暫定的ではありますが extension を使った応急処置で対処できます。

Extension

import SwiftUI
public struct DarkView<Content>: View where Content: View {
var wrappedContent: Content
public init(@ViewBuilder content: () -> Content) {
self.wrappedContent = content()
}
public var body: some View {
ZStack {
// Set background color
Color.black.edgesIgnoringSafeArea(.all)
// Set color scheme
wrappedContent.environment(\.colorScheme, .dark)
}
}
}
extension View {
public func darkMode() -> DarkView<Self> {
DarkView {
self
}
}
}
swift

ZStackwrappedContent の背景に Color.black を配置しています。

使い方

struct ContentView_Previews: PreviewProvider {
static var previews: some View {
Group {
ContentView().darkMode()
ContentView()
}
}
}
swift

.darkMode() を付けるだけで OK です。 将来的に不具合が修正されたら .environment(\.colorScheme, .dark) に変更してあげましょう。

Copyright © 2021 Shun Tedokon.