Change disclosure button arrow color

Question

I am creating a scrollView with a code like this:

ScrollView {
  ForEach(items) { item in
    VStack {
      DisclosureGroup {
        SubElements()
      }
      label: {
        DisplayItem(item)
      }
    }
  }
}

The result is something like this:

One thing I don't like about this is the chevron color. I want it black.

How do I change that?

Any ideas?

user_13886048 · Answer

You can change the chevron color with adding .accentColor after your DisclosureGroup.

Accent color is a color that represents the system or application accent color. See the Apple docs

user_5508175 · Answer

For your first issue it is probably down to padding that is stopping the indicator from being inset enough. As you haven't included all your code, it's difficult to tell where to put it but on your ScrollView should be enough.

For the color of the indicator, you can just use the accentColor modifier, and set the color that you want.

Here is a very simple example.

struct ContentView: View {

    var body: some View {
        ScrollView {
            ForEach(0..<5) { _ in
                DisclosureGroup(
                    content: { Text("Content") },
                    label: { Text("Label") }
                )
                .accentColor(.black)
            }
        }.padding(.horizontal, 30)
    }
}

This is what it looks like

user_2012219 · Answer

Change the color of content with foregroundColor and color of the arrow with accentColor:

DisclosureGroup {
  HStack {
    Text(faqElement.answer)
      .adaptiveFont(size: 14, family: .app, style: .regular)
      .foregroundColor(Color.App.Dynamic.Gray.value_900) // <-- Color of the text in content
    Spacer()
  }
  .padding(.vertical)
} label: {
  HStack {
    Text(faqElement.question)
      .adaptiveFont(size: 20, family: .app, style: .regular)
      .foregroundColor(Color.App.Dynamic.Gray.value_900) // <-- Color of the label
    Spacer()
  }
   .frame(height: 34)
}
.accentColor(Color.App.Static.Green.value_700) // <-- Color of the arrow

Change disclosure button arrow color

3 Answers