Set Accordion title background colour

[ralfboernemeier]

Hello,

is it possible to change the background of the Accordion title, when it is open, from blue to a self-defined value?
In my opinion, it would be helpful to maintain a colour style throughout the website.

Regards,
Ralf

[twostraws]

This isn't something I've investigated, although I agree it'd be a good idea to make uniformly customizable.

[jkaunert]

I'll gladly work this if its not yet assigned.

[twostraws]

@jkaunert Sounds great – please do look into it and see what you find! We have a lot of places where customization would be useful, so it's something we need to look into before coming up with a plan that can be applied uniformly. Thank you!

[jkaunert]

@twostraws I was hacked around with this by injecting a custom css file link - once again hijacking Head.standardHeaders(for page:in context:)- and adding a root override of the bs-variables for the accordion in custom.css like so:
/* Target root and override Bootstrap CSS Variable defaults */ :root { --bs-accordion-active-bg: #880808; --bs-accordion-active-color: var(--bs-white); }
and it worked nicely.

You can also use pseudoclasses, but its admittedly much more ugly, and you have to reach down into the svg, etc...

/* Use pseudoclasses and target css*/ .accordion-button:not(.collapsed) { color: #FFF !important; background-color: #880808 !important; } .accordion-button::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); } .accordion-button:not(.collapsed)::after { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); transform: rotate(180deg); }

maybe turning the Bootstrap css variables into "modifiers" could be a clean, viable option to open up uniform customization...

[twostraws]

I think the long-term fix here might be to look into some kind of theming system that controls all these properties in a clean, type-safe way.