NavigationBarTitle color change for watchOS in SwiftUI

Question

In the image above id like to change -02:49 to a color such as Color.blue

I've tried:

struct ContentView: View {

    var body: some View {
        PlayerView().accentColor(Color.blue)

    }
}

and I've also tried adding it in the actual PlayerView as follows:

struct PlayerView: View {

    var body: some View {
        VStack{
            .... 

        }.navigationBarTitle(Text(“-2:49”))
         .accentColor(.blue)

    }

}

I've also tried:

   struct PlayerView: View {

    var body: some View {
        VStack{
            .... 

        }.navigationBarTitle(Text(“-2:49”).foregroundColor(.blue))

    }

}

Guttapercha

Answer 1

At this point for change color of navigationBarTitle their is no direct api in SwiftUI.

But you can change it like this,
1) Go to Interface.storyboard file inside your AppName WatchKit App.
2) Select Hosting Controller Scene, Go to File Inspector and change Global Tint to your Custom Color.

Maxillary

Answer 2

With WatchOS7/Xcode12 using the SwiftUI App Lifecycle you won't have a storyboard.

There is now an AccentColor within the App assets which is how you can change it.

Ingulf

Answer 3

Here is the code if anyone want to change color of navigation title in WatchOS

.navigationTitle {    
  Text("Header").foregroundColor(.blue) 
}

Faliscan

Answer 4

The modifier to change text colour is .foregroundColor(), so you should write:

Text(“-2:49”).foregroundColor(.blue)

Accent colour is what was known in UIKit as tint colour, i.e. the colour of clickable items. ForegroundColor is used for nonclickable items to give them a certain colour.

Huei

Sorry, I had a typo in the question. The last example I provided should have been Text(“-2:49”).foregroundColor(.blue) not Text(“-2:49”).font(.blue) foregroundColor on the NavigationBarTitle doesn't seem to work. – Guttapercha

There’s also a modifier called .colorMultiply(.blue) which doesn’t do exactly what you are after, but might just do the trick. – Huei

I tried it. The issue is that the NavigationBarTittle is expecting something of type StringProtocol and using colorMultiply changes the Text View into some View therefore I get the error: Argument type 'some View' does not conform to expected type 'StringProtocol' – Guttapercha

Yes, colorMultiply is modifier on views. It might mean that you cannot really modify much. A hack that might work is to invert the bar only to be rightToLeft and then have no title and insert your text as a button that does nothing. It would have the tint colour by default. – Huei

Using UIKit you set the tintColor parameter to get the desired behavior. There should be an equivalent using SwiftUI but I can't seem to find it. Thanks for the help! – Guttapercha

In this video you can clearly see they were able to change the color – Guttapercha

Yes right but we are not able to see from where they are changing navigationBarTitle color. – Maxillary

Answer 5

@CodeChimp's answer is correct but not perfect. If you're updating from old project to SwiftUI, you also need to set up asset catalog compiler in your target like this;

If you don't have any Interface which means you completely adopt to SwiftUI. For this condition, you need to select "WatchKit Extension" target and make changes.

Faubourg