CODEWITHSUNDEEP
navigationbarswiftui
Alberto Penas
Alberto Penas

Reputation: 569

How can the background or the color in the navigation bar be changed?

Currently I couldn't find any method to change the color/background of the navigation bar in SwiftUI. Any tips?

Upvotes: 4

Views: 11080

Answers (9)

Mojtaba Hosseini
Mojtaba Hosseini

Reputation: 119302

iOS 16

You can set any color to the background color of any toolbar background color (including the navigation bar) for the inline state with these two simple native modifiers (both needed):

Xcode 14
.toolbarBackground(.visible, for: .navigationBar)
.toolbarBackground(.yellow, for: .navigationBar)

Notes:

  1. The color will be set on the entire bar (up to the top edge of the screen).

  2. toolbarBackground MUST be visible to see the color

  3. both modifiers should be applied on the content, NOT the NavigationStack (or NavigationView) itself!

Demo

Upvotes: -1

pd95
pd95

Reputation: 2622

The NavigationView is managing full screens of content. Each of those screens has its own background color. Therefore you can use the following approach to apply your Background color onto the screens:

let  backgroundColor = Color(red: 0.8, green: 0.9, blue: 0.9)

extension View {
    func applyBackground() -> some View {
        ZStack{
            backgroundColor
                .edgesIgnoringSafeArea(.all)
            self
        }
    }
}

Then you apply it to all your screens:

NavigationView {
    PrimaryView()
        .applyBackground()

    DetailView(title: selectedString)
        .applyBackground()
}

Be aware: some SwiftUI views have their own background color which is overriding yours (e.g. Form and List depending on context)

Upvotes: 0

dot3
dot3

Reputation: 1216

One thing to note that I didn't at first understand: SwiftUI will change the appearance of things like NavigationBar based on whether you are in night mode.

If you want to default it to a different color scheme add

.colorScheme(.dark)

If you create a color scheme using the color set system as outlined in this post: https://www.freecodecamp.org/news/how-to-build-design-system-with-swiftui/ it would apply to the main elements like navigations and tab bars, and allow you to apply different schemes for night/day mode.

Upvotes: 1

ldiqual
ldiqual

Reputation: 15365

With Introspect you could do it this way:

NavigationView {
    Text("Item 2")
    .introspectNavigationController { navigationController in
        navigationController.navigationBar.backgroundColor = .red
    }
}

Upvotes: 1

arsenius
arsenius

Reputation: 13246

Please see this answer for a solution that does not use .appearance().

In short use UIViewControllerRepresentable

func updateUIViewController(_ uiViewController: UIViewController, context: UIViewControllerRepresentableContext<NavigationConfigurator>) {
    uiViewController.navigationController?.navigationBar...
}

Upvotes: 1

Anjali Kevadiya
Anjali Kevadiya

Reputation: 3897

In SwiftUI, at this point we can not change it directly, but you can change navigationBar appearance like this,

struct YourView: View {
    init() {
        UINavigationBar.appearance().backgroundColor = .orange

        //Use this if NavigationBarTitle is with Large Font
        UINavigationBar.appearance().largeTitleTextAttributes = [.font : UIFont(name: "Georgia-Bold", size: 20)!]

        //Use this if NavigationBarTitle is with displayMode = .inline
        //UINavigationBar.appearance().titleTextAttributes = [.font : UIFont(name: "Georgia-Bold", size: 20)!]
    }

    var body: some View {
        NavigationView {
            Text("Hello World!")
              .navigationBarTitle(Text("Dashboard").font(.subheadline), displayMode: .large)
            //.navigationBarTitle (Text("Dashboard"), displayMode: .inline)
        }
    }
}

I hope this will help you. Thanks!!

Upvotes: 3

Md Shafiul Islam
Md Shafiul Islam

Reputation: 1659

Till now there is no definitive API in SwiftUI for this purpose. But you can use the appearance API. Here is a sample code.

import SwiftUI

struct ContentView : View {
    init() {
        UINavigationBar.appearance().titleTextAttributes = [NSAttributedString.Key.foregroundColor:UIColor.red]
        UINavigationBar.appearance().backgroundColor = .green
    }
    var body: some View {

        NavigationView {
            NavigationButton(destination: SecondPage(), label: {
                Text("Click")
            })
            .navigationBarTitle(Text("Title"), displayMode: .inline)
        }
    }
}

Upvotes: 2

Dan Halliday
Dan Halliday

Reputation: 765

Put a Rectangle behind your NavigationView inside a ZStack:

ZStack {
    Rectangle().foregroundColor(.red)
    NavigationView {
        ...
    }
}

Upvotes: 1

Max Vinicius
Max Vinicius

Reputation: 647

In order to change color of navigation bar for all view controllers, you have to set it in AppDelegate.swift file

Add following code to didFinishLaunchingWithOptions function in AppDelegate.swift

var navigationBarAppearace = UINavigationBar.appearance()

navigationBarAppearace.tintColor = uicolorFromHex(0xffffff)
navigationBarAppearace.barTintColor = uicolorFromHex(0x034517)

In here tintColor attribute change the background color of the navigation bar.

barTintColor attribute affect to the color of the:

  • back indicator image
  • button titles
  • button images

Bonus:

Change color of navigation bar title:

// change navigation item title color
navigationBarAppearace.titleTextAttributes =[NSForegroundColorAttributeName:UIColor.whiteColor()]

titleTextAttributes affect to the title text

I hope it helps. :)

Upvotes: 5

Related Questions