2

I'd like to override the default dark mode color in an app i'm prototyping but I haven't been able to change the color of the notch when I'm using a tab view. It works fine when I use a navigation view without a TabView with the following code:

NavigationView {
            ZStack {
                Color(.gray).edgesIgnoringSafeArea(.all)
                VStack {
                    Text("Test")
                }
            }.navigationBarTitle("Nav bar")
        }

This yields the following:

Image

However, as soon as I embed it in a TabView, the following happens:

Picture

I can see that this is because of a hosting view controller which has a black background color, however I can't find a way to change this color. This is what it looks like in the view debugger:

Image3

Anyone know if there is a way to change the color of this? There must be a way to override the default dark mode color. Perhaps I'm going about it the wrong way?

テッド
  • 776
  • 9
  • 21
  • Out of curiosity, why do you want to set this? The area of the screen covered by the notch is completely invisible to users - users only ever see it when taking a screenshot or in the app-switcher screen. – Dai Feb 03 '20 at 23:51
  • 1
    By the notch I mean the notch ears which as you can see in the second screenshot go black in a tab view. A lot of apps do have custom notch colors. If you open the trello app for example the notch is their brand blue and they are using a tab bar. Youtube also has a custom dark mode color that extends into the notch area. Netflix even manages to have an image scroll view go into the notch. There must be some way of doing it. – テッド Feb 04 '20 at 00:05
  • Maybe this [so answer](https://stackoverflow.com/a/59010023/5928180) can help you. – Zonily Jame Feb 04 '20 at 01:41

1 Answers1

3

Just change the order of views like below

 ZStack {
    Color.gray.edgesIgnoringSafeArea(.all)
    TabView(selection: $selection) {
       // ... tabs here
    }
 }
Asperi
  • 228,894
  • 20
  • 464
  • 690