Dawn Theme - Change Collection Filter Text Color

Store Design
, ,

Topic summary

Issue: On Shopify’s Dawn theme, collection page filter text (facets) is too dark against a dark background. Changing the global span color to white fixes the filter text but also turns dropdown menu text white, making it unreadable. The user seeks either a selector-only fix for filter text or a way to change the dropdown background.

Context: Store URL and password were shared for inspection. An image was provided showing the dropdown before changes (not essential to the fix).

Proposed fix: Add a targeted CSS rule in Assets > base.css using the selector .facets__summary.caption-large.focus-offset with color: #fff. This aims to set only the filter summary text to white without affecting the dropdown menu items.

Follow-up: The user asked if there is documentation listing all available CSS selectors for Dawn (or other themes).

Status: A practical CSS solution was provided; the request for official selector documentation remains unanswered, so the discussion is partially resolved and still open on that point.

Summarized with AI on January 18. AI used: gpt-5.
1

I am using the Dawn theme, and I have my background set to a dark color, so that when you are on a collection page the filter options are difficult to see, as they are a dark text color. I’ve made sure that I am using the correct color theme for the collection pages, but it doesn’t seem to help.

I looked into the CSS, and couldn’t find a specific selector for just the text, so I set “span” to the white, the color I want. Unfortunately, when I do that, it changes the text in the drop-down menu to white as well, so that you cannot see the text. The image below shows it before I make any changes (if I make the change I just described, the text in the drop-down menu would be white, and unreadable).

filter_drop_down.png
filter_drop_down.png1019×504 116 KB

I’m looking to either a) change only the filter text color (and not the drop-down menu text color as well), or b) change the background color of the drop-down menu (because then I can just make all the text white and set the background color to the dark background color as well).

1 Like
2

Hi @night_owl_co

Please share your page link so I can check and give you the solution

3

Night Owl Comics

The password is “rerald”

4

Hello there,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
.facets__summary.caption-large.focus-offset {
color: #fff;
}

ZestardTech_0-1695014044493.png
ZestardTech_0-1695014044493.png1808×553 126 KB

5

Thanks! Does there happen to be documentation that shows all of the available CSS selectors in the Dawn (or any) theme?