Dawn Theme: How do I change the colour of my search box?

Store Design

Topic summary

Goal: make the header search bar in the Dawn theme entirely white, without altering the dedicated search results page.

Proposed fix: add CSS in base.css targeting the predictive search overlay (auto-suggest) and search modal to turn text and icons white.

  • .predictive-search__item-heading, .predictive-search__item .price, .predictive-search__heading: text to white
  • .predictive-search__item–term: text to white
  • .animate-arrow .icon-arrow path: icon fill to white
  • form.search.search-modal__form label.field__label and #Search-In-Modal: label and input text to white

Remaining issues: hover text and the search box border stayed dark. Follow-up CSS:

  • .predictive-search__item–term:hover: hover text to white
  • .search__input.field__input: white box-shadow used as the border on focus/focus-visible (Dawn uses box-shadow for input outlines).

Resolution: partial; no confirmation that the non-focused border is white. Discussion appears ongoing.

New request: change the blue–green background of the search area without affecting other elements (screenshot provided). No solution yet.

Summarized with AI on February 12. AI used: gpt-5.
1

I have managed to change all of the colours in my header with different codes. This allows me to have my text colour as dark blue (#000F46) but this affects many elements on the webpage.

The only part I haven’t been able to change colour of is the whole search area in the header. I want all of it to be white. I don’t want the page with search results to change colour, just the search bar that appears in the header when you search.

Please help me code this.

URL: https://pleasedontbetaken.myshopify.com/

Password: lutred

Thanks!

2

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:
.predictive-search__item-heading, .predictive-search__item .price, .predictive-search__heading {color: white;}
.predictive-search__item--term {color: white;}
.animate-arrow .icon-arrow path {fill: white;}
form.search.search-modal__form label.field__label {
color: white;
}
input#Search-In-Modal {
color: #fff;
}
1 Like
3

Thank you for your reply @ZestardTech .

This partly solved my problem. If you check now the texts are white. However, the following remains black;

  • Search results text on hover
  • Search box border
1 Like
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:
.search__input.field__input:focus{box-shadow: 0 0 0 1px #fff;}
.search__input.field__input:focus-visible{box-shadow: 0 0 0 1px #fff;}
.predictive-search__item--term:hover{
color: white;
}
5

how do I change this blue greenish background color without affecting other elements?

appreciate your help!

Capture.PNG
Capture.PNG1303×219 8.26 KB