SwiftUI SF Symbols Image: Dark Mode Image For Light Mode

Question

currently within my app, the images I have in this ContentView.swift file look fine on an iPhone with its display settings set to Dark mode (1st image) However, when I'm using my simulator that's set to light mode, it doesn't have good contrast (2nd image).

Dark mode images (good, what I want both to look like):

Light mode images (bad, due to low contrast and legibility):

struct ContentView: View {
    @StateObject var sharedVars = SharedVarsBetweenTabs()
    
    var body: some View {
        TabView {
            HomeView().environmentObject(sharedVars)
                .tabItem {
                    Text("Home")
                    Image(systemName: "house.fill")
                }
            AppearanceView().environmentObject(sharedVars)
                .tabItem {
                    Text("Appearance")
                    Image(systemName: "paintbrush.fill")
                  }
            QuotesView().environmentObject(sharedVars)
                .tabItem {
                    Text("Quotes")
                    Image(systemName: "quote.bubble.fill")
                }
        }
        .environmentObject(sharedVars)
        .accentColor(.blue)
    }
        
}

Ideally, I simply want them to both look like the dark mode image, regardless of what the user's phone display setting is—since the app background is the same. I'd greatly appreciate any help or suggestions.

Answer 1

You can force the icon to be independent of the environment very easily. o(>v<)o

Which add with:

.onAppear {
  UITabBar.appearance().unselectedItemTintColor = UIColor.white
}

Showing Image Code:

import SwiftUI

struct ContentView: View {
  
  var body: some View {
    
    TabView {
      Text("Hi")
        .tabItem {
          Text("Home")
          Image(systemName: "house.fill")
        }
      Text("Hi")
        .tabItem {
          Text("Appearance")
          Image(systemName: "paintbrush.fill")
        }
      Text("Hi")
        .tabItem {
          Text("Quotes")
          Image(systemName: "quote.bubble.fill")
        }
    }
    .accentColor(.blue)
    .onAppear {
      //Backgroud Color
      UITabBar.appearance().backgroundColor = UIColor(Color(red: 79/255, green: 65/255, blue: 54/255))
      
      //Icon Color
      UITabBar.appearance().unselectedItemTintColor = UIColor(Color(red: 133/255, green: 123/255, blue: 116/255))
    }
    .environment(\.colorScheme, .light)
  }
}

#Preview {
  ContentView()
}