Not able to achieve dark mode using SwiftUI

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

I am using the above code to achieve dark mode on my demo project but its not working.
Any help or insight would be really appreciated.

4 Answers

This seems to be a bug in Xcode 11.0 beta. A temporary workaround is to wrap your content inside a NavigationView.

For example, the following code will not take effect in dark mode preview:

var body: some View {
  Text("Hello World")
}

But after wrapping the content in a NavigationView, dark mode preview works as expected:

var body: some View {
  NavigationView {
    Text("Hello World")
  }
}

Result:

enter image description here

Dark mode is half working in previews, it just forgets to draw the background.

The following workaround allows you to add .darkModeFix() to your ContentView() in your preview function. You can optionally add false as a parameter to switch off dark mode.

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

Just add the following somewhere in your project:

public struct DarkView<Content> : View where Content : View {
    var darkContent: Content
    var on: Bool
    public init(_ on: Bool, @ViewBuilder content: () -> Content) {
        self.darkContent = content()
        self.on = on
    }

    public var body: some View {
        ZStack {
            if on {
                Spacer()
                    .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)
                    .background(Color.black)
                    .edgesIgnoringSafeArea(.all)
                darkContent.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity).background(Color.black).colorScheme(.dark)
            } else {
                darkContent
            }
        }
    }
}

extension View {
    public func darkModeFix(_ on: Bool = true) -> DarkView<Self> {
        DarkView(on) {
            self
        }
    }
}

It fixed the preview, but doesn't change my code

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, World!")
    }
}



struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ZStack {
                Color.black.edgesIgnoringSafeArea(.all)
                ContentView().environment(\.colorScheme, .dark)

            }
            ContentView().environment(\.colorScheme, .light)
        }
    }
}

A bug apparently. Even doing MyView().colorScheme(.dark) isn't working.
Context-click (right click, or Ctrl-click) the 'play' button (which you use to simulate running your app). Click Debug Preview. Open the Debug area. Then, you can use the Enviroment Overrides to configure things like dark/light mode, dynamic type, accessibility settings etc.

BTW, to open the Enviroment Overrides settings go to just above the debugger and press this button:
Env overrides look similar to a toggle switch

Related