Search icon doesn't change color between light/dark mode

[tuckergordon]

The search icon as defined in --ifm-navbar-search-input-icon is uses currentColor:

--ifm-navbar-search-input-icon: url('data:image/svg+xml;utf8,<svg fill="currentColor" ...

However, this does not have the intended effect because currentColor does not get applied on images rendered using url(). This results in the search icon not changing color when switching between light/dark theme (and makes it hard to customize the color more generally).

Perhaps a more flexible approach would be to use an actual SVG in the element, similar to how Docusarus has implemented it on their website:

[slorber]

As far as I know this CSS var is not even used on Docusaurus,

But is only found in Infima search: https://infima.dev/demo/

I'll keep this issue open because we should probably delete it from Infima, it's confusing for Docusaurus users and useless

---

The only official Docusaurus search icon is from the Algolia search widget lib and using a SVG, not a CSS var.

---

And it adapts to the current theme using a CSS var that we provide:

.DocSearch-Button .DocSearch-Search-Icon {
    --docsearch-text-color: cyan;
    color: var(--docsearch-text-color);
}

[tuckergordon]

I'll keep this issue open because we should probably delete it from Infima, it's confusing for Docusaurus users and useless

Agreed - would be good to remove it entirely and replace the demos with an SVG-based solution.

I ran into this while using the easyops-cn/docusaurus-search-local library, so I will make a issue ticket in that repo and reference this one.