How to change Variant capsule color (DAWN Theme)

[NoelB1]

Hello, how can i change the Variant Capsule color in the Dawn Theme? 

I already tried to add this Code to the base.css:

.product-form__input input[type=radio]+label {
background: #74512D !important;
}
.product-form__input input[type=radio]:checked+label {
background: #74512D !important;
}

But now the Text is black and not white how i want it

[Gabe]

Hey @NoelB1 

You have reached the German community here but we can chat in English too, that's no problem!

To change the text color to white for the selected and unselected state of the variant option buttons in the Dawn theme, you'll need to modify the CSS to target the label text specifically. To change both the background color of the buttons and the text color to white maybe try try something like:

/* Changes the background color of the unselected variant buttons */
.product-form__input input[type=radio] + label {
  background-color: #74512D !important; /* Brown background */
  color: white !important; /* White text */
}

/* Changes the background color of the selected variant button */
.product-form__input input[type=radio]:checked + label {
  background-color: #74512D !important; /* Brown background */
  color: white !important; /* White text */
}

/* Optional: Change the color of the border if needed */
.product-form__input input[type=radio] + label {
  border-color: #74512D !important; /* Brown border */
}

Here's what each part does:

• The .product-form__input input[type=radio] + label selector changes the styles for all variant labels next to a radio input.
• The .product-form__input input[type=radio]:checked + label selector specifically targets the labels next to checked (selected) radio inputs.
• The background-color: #74512D !important; line changes the background color of the buttons to a brown color.
• The color: white !important; line changes the text color of the labels to white.
• The border-color: #74512D !important; line is optional and can be used to change the border color of the buttons if your theme has borders for these elements.

This should ensure that your custom styles override the default theme styles.

If you need further help I can recommend an expert for you.

[NoelB1]

Should i paste this into base.css?

[Gabe]

@NoelB1 

If it doesn't work in the theme css editor then yes, however, it's recommendable to not change the theme code itself but use the css editor as much as possible. 

Changing the base code can exclude the theme from the theme updates and slow down page-loading times.

Please contact a Shopify frontend programmer if you have further questions. You also get 60-Min Design Time as that's a Shopify Theme.