How can I change the search bar text color in Modular theme?

Topic summary

Main issue: After updating to the latest Modular theme, the search bar’s input text appears white (invisible). The user wants the text to display in black and match the theme’s fonts.

Recent actions:

  • A workaround was provided to force black text via Custom CSS (Cascading Style Sheets):
    .search-popdown input[type=search] { color: #000000 !important; }
    Steps: Online Store > Themes > Modular > Customize > Theme settings > Custom CSS. A screenshot illustrates where to add it.

Follow-up request: The user reports the text color fix works but the font looks off, asking how to use the theme’s fonts for the search input.

Guidance: Fonts can be configured in Theme settings (global typography). A screenshot shows where to adjust theme fonts; no specific CSS for the input font was provided.

Outcome/status: Color issue addressed via CSS; font alignment directed to Theme settings. Awaiting confirmation whether typography settings resolve the search input font, so the thread appears open.

Summarized with AI on January 12. AI used: gpt-5.

When I upgraded to the latest version of Modular, the text color in the search bar is white, so it doesn’t show up - how can I fix it - want it to be black. Thanks

Hi, try to do this steps.

  1. Go to Online Store > Themes > Modular Theme and Customize.

  2. Go to “Theme settings” and add this css on Custom CSS

.search-popdown input[type=search] {
    color: #000000 !important;
}

And this the screenshot :

This made it better but it’s not a great font - is there a way to change the font to my theme fonts?

Hi, Do you mean fonts for theme? You can set in theme setting.

Thanks!