Dark mode preview problem

I see a problem with designing using dark mode displays. Why is no background In HStack and VStack areas around the text fields invisible in the HStack. This seams to be a bug in the design of the SwiftUI Preview?

Replies

Sorry to hear you are having problems getting previews working as expected. Could you attach a screenshot of what you are seeing in previews compared to in the simulator when running the app?

Also, the code to reproduce would be great too!

Since is is a document based app not all is visible ins the ContentView_Previews so I am looking at previews in the other struct files. Here is an example where the preview will not show dark mode correctly where I am trying to see preview of both dark and light previews of this struct. The dark mode is completer white with not text but the other is shown with text visible.

//

//  InventoryLineView.swift

//  InventoryApp

//

//  Created by Jack Reigh on 12/12/20.

//

//  Last Updated 4/14/21

import SwiftUI

struct InventoryLineView: View {

    var inventory: [inventoryEntry]

    @State private var showSheet3 = false

    @State var itemIn: inventoryEntry // 6

    var body: some View {

        HStack {

            Text("(itemIn.name)")

                .lineLimit(4).padding(.horizontal)

                .frame(width: 250, height: 88,alignment: .leading)

                .onTapGesture{ print("Tap (itemIn)"); showSheet3 = true }.sheet(isPresented: $showSheet3) {

                    EditItemView(showSheet: $showSheet3, itemIn: $itemIn)} // 6

            Spacer()

                .frame(width: 4, height: 88, alignment: .leading).background(Color.orange)

            Text("(itemIn.catagory)").lineLimit(4).padding(.horizontal)

                .frame(width: 200, height: 88,alignment: .leading)

        }

        .frame(width: 468, height: 88, alignment: .leading)

        .overlay(RoundedRectangle(cornerRadius: 8.0).stroke(Color.green, lineWidth: 5))//.padding(.horizontal, 0)

    }

}

struct InventoryLineView_Previews: PreviewProvider {

    static var data = InventoryModel()

    static var previews: some View {

        let inventory = data.setSampleInventory()

        let item: inventoryEntry = data.setEntry()

        InventoryLineView(inventory: inventory, itemIn: item)

        

        InventoryLineView(inventory: inventory, itemIn: item).environment(.colorScheme , .dark)

    }

}

Another example struct preview with both light and black previews. The HStack in this view is all white not allowing the which i to be a header Name and Category. It is not in the list to prevent it from scrolling with long lists to he a header always visible. It works in the full on a device but can not be seen in ContentView but at the start no document is yet loaded so I use the Struct previews to see them with actually data examples. but dark view does not display correctly for the separate struct previews.

//

//  DocumemtViewer.swift

//  DocumentPicker

//

//  Created by Jack Reigh on 3/23/21.

//

//  Last Updated 5/5/21

import SwiftUI

struct DocumentViewer: View {

    var inventory: [inventoryEntry]

    @State private var showSheet1 = false

    @State private var showSheet2 = false

    @State var itemId: UUID? = nil

    var body: some View {

        VStack {

            HStack{

                Text("Name").padding(2)

                    .frame(width: 250, height: 40,alignment: .top)

                Spacer()

                    .frame(width: 4, height: 40, alignment: .top).background(Color.orange)

                    .padding(.horizontal, 0 )

                Text("Category").padding(2)

                    .frame(width: 200, height: 40,alignment: .top)

            }

            .padding(.horizontal, 0) //7 yes

            .frame(width: 468, height: 40,alignment: .leading)

            .overlay(RoundedRectangle(cornerRadius: 8.0).stroke(Color.orange, lineWidth: 5)).padding(5)

            List {

                ForEach(inventory, id: .self.id){ item in  // 6

                    InventoryLineView(inventory: inventory, itemIn: item).frame(alignment: .center)

                        .frame(width: 483, height: 88, alignment: .center)//.background(Color.orange)

                } // ForEach

                .environment(.defaultMinListRowHeight, 0 ) // spacing between rows in list

                .environment(.defaultMinListHeaderHeight, 0 ) // spacing between rows in list

            .navigationTitle("Inventory File View")

            }.environment(.defaultMinListRowHeight, 88) // List End

            .frame(width: 510, height: length - 180, alignment: .bottom)//5

        }.frame(height: length - 118,alignment: .bottom)

        // Outer Border of Inventory VStack

        .overlay(RoundedRectangle(cornerRadius: 8.0).stroke(Color.blue, lineWidth: 5)).padding(5)

    }

}

struct DocumentViewer_Previews: PreviewProvider {

 

    static var data = InventoryModel()

    

    static var previews: some View {

        let sample = data.setSampleInventory()

        DocumentViewer(inventory: sample)

        DocumentViewer(inventory: sample).environment(.colorScheme , .dark)

    }

}

Thanks for the code snippets. These unfortunately rely on model types that aren't included. I think probably the best next step would be for you to file a feedback where you can attach a sample project where this reproduces. Report back here with the feedback ID and I'll make sure it gets to the right team as soon as possible.

I solved the problem with much better modifier as below.

    DocumentViewer(inventory: sample)

            .preferredColorScheme(.light)

The new swiftUI Table will make it even easer by incorporating the headers since making them outside the List is what caused the original problem.

That's great to hear! You are correct that .preferredColorScheme is the right modifier to use for this.

  • I have noticed that if what your are previewing has only HStacks, VStacks and Text the background will be the development background of the if your development is in Dark Mode. I do not think this is what is expected. Using XCode 12.5.1

Add a Comment