7.1 CSS styling workaround of non-default color theme buttons for changing section colors

There's a bug in the 7.1 template that custom colors applied to the background of a non-active color theme don't then show when subsequently applied to a specific section on the website (it defaults to the regular colors). This is a bit of a pain, as it would be a great feature to setup more than the two contrast colors easily for an end user.

I can fix this for the website itself by adding the following to the custom CSS;

.black-bold:not(.has-background) .section-background {background-color: #ff0000 !important;}

However, I would also like to update the color selector button to also look the same.

In my example, I'm trying to target the 'black bold' button in the section color selector. The element selects as;

<button data-color-id="black" class="ThemeCard-card-3WmWD" value="black-bold" data-test="theme-card-7" style="background: rgb(0, 0, 0);"><span data-color-id="safeLightAccent" class="ThemeCard-largeSample-2Yust" style="color: rgb(255, 255, 255);">Heading</span><span data-color-id="white" class="ThemeCard-smallSample-YTLoM" style="color: rgb(255, 255, 255);">This is a section<br>of a paragraph.</span></button>

But when I try to target it to change the background color of the button to the red in the css, neither of the following works.

.ThemeCard-card-3WmWD {background: #ff0000 !important;}

input[value="black-bold"][data-color-id="black"] {background: #ff0000 !important;}

What should I be using to select this element?

Image below if it helps understand where I mean. Thanks