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))

    }

}

score 21 · Answer 1 · answered Aug 15 '20 at 11:03

21

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.

answered Aug 15 '20 at 11:03

CodeChimp

4,745
6
45
61

score 11 · Accepted Answer · answered Sep 23 '19 at 15:57

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.

score 5 · Answer 3 · answered Aug 23 '22 at 17:25

5

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

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

answered Aug 23 '22 at 17:25

Hussain Shabbir

14,801
5
40
56

score 0 · Answer 4 · answered Sep 20 '19 at 23:52

0

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.

answered Sep 20 '19 at 23:52

LuLuGaGa

13,089
6
49
57

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. – 39fredy Sep 21 '19 at 00:01
There’s also a modifier called .colorMultiply(.blue) which doesn’t do exactly what you are after, but might just do the trick. – LuLuGaGa Sep 21 '19 at 00:07
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'` – 39fredy Sep 21 '19 at 00:11
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. – LuLuGaGa Sep 21 '19 at 00:45
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! – 39fredy Sep 21 '19 at 00:48
In [this video](https://developer.apple.com/videos/play/wwdc2019/219/) you can clearly see they were able to change the color – 39fredy Sep 21 '19 at 06:49
Yes right but we are not able to see from where they are changing navigationBarTitle color. – Anjali Kevadiya Sep 23 '19 at 15:39

score 0 · Answer 5 · answered Oct 01 '22 at 22:15

@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.

NavigationBarTitle color change for watchOS in SwiftUI

5 Answers5

Linked