---
title: Search bar filter chips on dark backgrounds
description: "If your search bar is placed over a dark hero image or a dark section, you can set the filter chips to use white text. **YOOtheme.** On YOOtheme sites,…"
url: "https://homerunner.io/docs/how-do-i-make-the-search-bar-filter-chips-show-white-text-when-the-search-bar-is/"
updated: "2026-10-26"
category: Theme and design
---

# Search bar filter chips on dark backgrounds

If your search bar is placed over a dark hero image or a dark section, you can set the filter chips to use white text.

**YOOtheme.** On YOOtheme sites, the filter chips switch to white automatically when the section's text style is set to **Light**.

**Other page builders.** On page builders such as Elementor or Divi, add the CSS class **hrtk-light** to the section or container that holds the search bar. This makes the chips and the suggested-dates strip use white text.

**In Elementor:**

1. Select the container.
2. Go to **Advanced**, then **CSS Classes**.
3. Add **hrtk-light**.

**Keeping the chips dark.** If the section is light-colored and you want the chips to stay dark, add the class **hrtk-dark** the same way.

Still stuck? [Contact the HomeRunner team](https://homerunner.io/contact/) with your site address and what you tried, and we take it from there.