Dawn Theme Variant / Quantity are blacked out

Store Design
, ,

Topic summary

A user is experiencing an issue with the Dawn theme where variant and quantity selector elements appear with black backgrounds and text, making them unreadable.

Problem Details:

  • The variant/quantity selectors have black backgrounds and black text
  • User has attempted to change theme colors but cannot resolve the issue
  • A screenshot was shared showing the problem

Proposed Solutions:
Multiple community members offered CSS-based fixes:

  1. Method 1: Add custom CSS to the base.css file targeting .product__info-wrapper elements to change text color to white (#fff)
  2. Method 2: Insert CSS code into theme.liquid file before the closing </body> tag

A screenshot showing the expected result was provided.

Current Status:
The initial CSS solution helped, but the user is now asking if they can change the color scheme entirely (not just to white) and remove the black background completely. The discussion remains open with this follow-up question unanswered.

Summarized with AI on November 23. AI used: claude-sonnet-4-5-20250929.
1

Hi there,

I am using the dawn theme and I have my website ready to publish however I am struggling to change the colour of the variants / quantity (background and text). I have attempted to change the colour on themes but none of seem to amend how it looks

Screen Shot 2023-01-17 at 10.01.18 PM.png
Screen Shot 2023-01-17 at 10.01.18 PM.png1178×1128 109 KB

2

@RebeccaPR
can you share preview link of the store ?

3

@RebeccaPR
Hello,
Can You Please Share Your store URL? I Will Check and Provide proper Solution

4

hello @RebeccaPR

Can You Please Share Your store URL?

5

Apologies link is here - https://pk33elchjio4k9zi-63091638512.shopifypreview.com

@shubhamSharma @oscprofessional @Ujjaval

6

hello @RebeccaPR

step 01:

  1. Go to your Store > Theme > click to edit code.
  2. find this file " base.css " and open.

step 02:

  1. Paste the code at the end of the file.
.product__info-wrapper  .js.product-form__input label{
    color: #fff !important;
}
.product__info-wrapper  button.quantity__button, .product__info-wrapper quantity-input.quantity input {
    color: #fff !important;
}

this idea helps you

7

Monthly-Planner-–-Partially-Organised-Life.png
Monthly-Planner-–-Partially-Organised-Life.png1600×740 92.2 KB

8

@RebeccaPR
put below css into theme.liquid file before closing tag
9

Thank you that helped. However is there away I can change the colour and sub out the black?