How can I modify the white frame and hovered text colours in Debut Theme?

Store Design
, ,

Topic summary

A user seeks to customize the Debut theme by changing the white frame and hovered text colors on their collection page.

Solution Provided:

  • Add custom CSS code to the theme.css file via Online Store > Themes > Edit code
  • The provided CSS targets .filters-toolbar__item-child elements to modify border and hover colors

Current Status:

  • The frame color modification worked successfully
  • The hovered text color remains white and still needs fixing
  • The issue is partially resolved, with the text hover color problem outstanding
Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

How could i change the white frame and hovered text colours?

Sin título-1.png
Sin título-1.png384×382 25.4 KB

https://aighard.com/

Pass: blaosk

2

Hi @Aighard

Please go to Online Store > Themes > Edit code, find the theme.css file, and add the following code at the end of the file:

.filters-toolbar__item-child .filters-toolbar__input-wrapper.select-group:focus-visible, .filters-toolbar__item-child .filters-toolbar__input:focus-visible {
   outline: #C04B3F solid 1px;
}

.filters-toolbar__item-child .filters-toolbar__input option:hover {
  color: #C04B3F ;
}

I hope that this will work for you.

3

Thanks a lot, it worked for the frame, but the hovered text is still white.
Any idea how to fix it?