Alert/List Group Item Colors

Is there a way to associate the branding colors with the selections available for the List Group items? Those seem to pick up the ‘alert/notification’ color schemes, which, in turn, I did not find a place to change the colors for.

If I understand your question, you want to style each list item? If you click on the list item that inspector changes and you have a drop down that you can select from the colors (Success, Info, Primary etc…) or you can select customize and use the color picker for the item, icon and text.

I hope that answers your question.

I’m checking with Adam to clarify the functionality of each color in the drop down

Yes, you understand me right.
However, when I try the dropdown, I get predefined colors, which I do not know how to change. They are not the ones I selected in ‘Foundry’ for those.

Please consider the screenshot I am linking. It shows my defined colors at the bottom, the selected dropdown item and the resulting colors in the edit window.

Thank you for your time.

Hey there @Andras!

You are correct. The preset colors for the Alert and List Groups are not connected to the main Foundry stack’s Brand Colors. As you notice the colors for the Alert and List Groups are a lighter color than the normal default presets. This is because the branding colors and these lighter, background colors are not connected in Bootstrap.

There is room for improvement here, for sure. It is on my list of things to look at, whether that means making it use the exact brand colors, or a modified, lighter version of the brand colors.

For now I’d suggest using the custom color picker.

1 Like

Thank You.

May I ask what the consideration is for contemplating anything other than the ‘brand’ colors? (I am asking because I made a list group an integral part of a home page, where it would be great to be able to ‘rebrand’ at will.) Please note, I fully trust your aesthetic lead here, and would welcome any orchestrated way of changing the colors, regardless of your decision.

And, if I may, I would like to know if there’s an obvious way, I may have missed, to change hover color for the same List Group items?

Thank you again.

May I ask what the consideration is for contemplating anything other than the ‘brand’ colors?

Not sure I completely understand this question, but I’ll take a shot at it – Bootstrap, which Foundry is built around, has two sets of preset colors: The normal Brand colors and a lighter version of those Brand colors for the backgrounds of some elements (like the ones you’re wanting to change). The reason Bootstrap does this is that their primary set of Brand colors are all pretty dark in nature and they likely wanted nice light backgrounds for these elements.

Foundry lets you change the main Brand colors in the Control Center stack. The lighter, background Brand colors are not directly attached to, or affected by the Control Center’s Branding colors though. They’re a separate entity altogether.

As I mentioned, there’s likely room for improvement here. It is on my list of things to look at.