How do you change the colors of AI Faceted search widget?

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
06-24-2022 04:02 AM
Hi,
We just enabled the AI Search in our EC portal. I want to change the primary colors used in the Search Results page - specifically the text highlight color, which now is green.
See Image 1
When inspecting the page, I see that the colors are coming through --now variables.
See Image 2
I added my custom colors in the theme attached to the EC portal, however the new color values don't seen to be getting picked up by the widget. I tried using both !important and !default + clearing the browser cache.
See Image 3
I don't want to clone the widget and change the colors in the CSS. There must be an easier way to do this. So how can I override the --now variables?
Any help will be much appreciated.
Thanks,
Dana
PS: I found this article where they describe how to set custom background color for the Search Results page, however it didn't work for me.
- Labels:
-
AI Search
-
Service Portal
- 2,038 Views

- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
06-27-2022 01:37 AM
So according to this article there's no way of overriding the colors.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
11-21-2022 06:00 PM
I have exactly the same question, found your post, and was instantly disappointed at the answer. We want the text colours to follow the styles set in the Theme, or just change them to match.
Font: To match the theme - This is working
Serach Result title to be a specific colour
Links to be a specific colour - Same as theme setting
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
12-12-2024 02:50 AM
Hi Gavin
I am having a similar requirement.
Were you able to get the desired results somehow in the end?
Many thanks for any hints!