tdkn.dev

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

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

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

これは既知の不具合で、私が発見した回避方法としては、View を NavigationView でラップするか、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
        }
    }
}

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

使い方

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

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

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

Extension

使い方