skip to Main Content

I’ve defined a custom accent color for light and dark mode. When using light mode the accent color should be black and in dark mode white.

When using light mode everything works fine:

When light mode is active

But when turning dark appearance on, the selection color for the list item isn’t working as expected.

When dark mode is active

What am I missing? Why does the selection not invert in dark mode? The provided screenshots are related to the simulator in macOS.

Many thanks!

Update:
As asked by @son the code for the selection

List(selection: $appState.selectedDetail) {                         
  ForEach(listItems) { item in          
    HStack {                             
      Text("(item.startDate.formatDate())")                             
      Text("-")
      Text("(item.endDate.formatDate())")                             
    }
    .tag(DetailSelection.item(item: item))                                 
    .monospaced()                
  }
}

2

Answers


  1. You get the environment color scheme and set the text color according to the current scheme.

    @Environment(.colorScheme) var colorScheme
    var body:some View{
       Text("Your Text here")
       .foregroundStyle(colorScheme == .dark ? .black : .white)
    }
    
    Login or Signup to reply.
  2. I followed the instructions for specifying an accent color and it works for me:

    Screenshots

    There are two main steps:

    1. Configure the color in your asset library:

    AccentColor

    1. Name it in your build settings:

    BuildSettings

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search