How to change the background colour of the section up/down arrow

The corporate colour scheme dictates that the section should have a dark blue colour. The implication of this is that the expand/collapse icon (up/down arrow) is barely visible (see image below)

I know we can change the section label background colour with something like this:

.orbeon .xbl-fr-section h2.fr-section-title .fr-section-label.fr-section-open {background-color: #58b6d2;}

How can we change only the background colour of the icon?

Try the following CSS, which removes the background images and replaces them with Font Awesome carets. In this example, the carets are set to appear in black, but you can change their color to make them more visible on your dark blue background—white, matching the text color, might work well.

/* Common styles for both open and closed sections */
.fr-section-open::before,
.fr-section-closed::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: inline-block;
  margin-right: 8px;
  color: #333;
  font-size: 0.75em;
}

/* Specific content for open section (downward caret) */
.fr-section-open::before {
  content: "\f0d7"; /* Unicode for 'caret-down' icon */
}

/* Specific content for closed section (rightward caret) */
.fr-section-closed::before {
  content: "\f0da"; /* Unicode for 'caret-right' icon */
}

/* Ensure no background images are applied */
.fr-section-open,
.fr-section-closed {
  background-image: none !important;
}