How can I adjust my website's theme for better visibility of selectors?

Store Design

Topic summary

A user is implementing dual dark/light themes on their Shopify store but encountering visibility issues with specific interface elements. The country/region selector, variant picker, and quantity selector are not displaying properly due to color conflicts with the dark background.

Main Issues:

  • Selectors appearing invisible against dark theme background
  • Unwanted black corner lines on quantity selector borders

Solution Provided:
BSS-Commerce staff provided CSS code to add to the base.css file:

  • First fix: Changed text color to black for .select__select, .quantity, and .localization-selector elements
  • Second fix: Removed borders from quantity selector and adjusted icon color

Current Status:
The initial code successfully fixed font visibility. The follow-up code addressing the border lines was provided but not yet confirmed as working. The user’s theme is active at moderndayrags.com for troubleshooting purposes.

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

Hello! So… I’m trying to have a dark and a light theme for my website. I’m currently working on my site and I think I have it pretty dialed in but I’ve noticed that my country/region and my variant picker and quantity selector aren’t showing up due to the color section is backwards to change those particular ones (hope this makes sense). I am also wanting to remove the lines in the corners of the quantity selector. I should also mention it’s not a current active theme. Thank you so much!

URL: moderndayrags.com

2

Hi @moderndayrags

Can you provide detailed information about what you want to do (screenshot or video)? Then, we will check it and suggest you a solution if possible.

3

BC1E2234-AAE9-432A-8688-588048A981A8.jpeg
BC1E2234-AAE9-432A-8688-588048A981A8.jpeg1170×2532 333 KB

4

570E2C22-0824-4BEE-875D-44595826969E.jpeg
570E2C22-0824-4BEE-875D-44595826969E.jpeg1170×2532 235 KB

5

Hi @moderndayrags

It seems that you’re not publishing the theme with problems to the live view, so we can not check the CSS. We see that the theme you’re using on the live view is another theme.

Please let us know with more information.

6

They are the same theme just a black background.

7

Hi @moderndayrags

Please go to Online store > Themes > Edit code. Find the file “base.css”, scroll down to the bottom, and add this code:

.select__select,
.quantity,
.localization-selector {
  color: black!important;
}

I hope that it works for you.

1 Like
8

Thank you! It worked for the font but do you know how to get those pesky small corner black lines off the quantity selector (pic above)? Thank you!

9

Hi @moderndayrags

For the border color of the quantity button, it is likely that the added code caused errors. Because there is no CSS here, we can not check it for you. If you have further information, please provide us.

10

It has been there since before the code. I have theme active if you wanna take a look?

URL:moderndayrags.com

11

Hi @moderndayrags

Please follow our previous instructions and go to the base.css file. Then, add this code at the end of the file:

.quantity .icon {
 color: black!important
}
.quantity {
 border: none!important;
}

I hope that it will work for you.