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

[tuckergordon]

The current search icon implementation relies on --ifm-navbar-search-input-icon, however there is a known bug (infima#287) with the variable in that icon that prevents it from changing color. Furthermore, from that issue thread it sounds like it will be removed in future versions:

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

Therefore I suggest that we refactor this library's implementation to instead use an SVG approach like the one Algolia uses. As part of that refactor, it would also be nice to allow the x icon to change color as well - it doesn't seem like it's possible to change this currently without global css.

Relates to #331

[tuckergordon]

In the meantime, for anyone trying to change the color of the icon you can copy and paste the entire var definition and then just change it to be the color you want:

:root {
    --ifm-navbar-search-input-icon: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16px" width="16px"><path d="M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609,0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021,0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338,4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z" /></svg>');

fill="white" is where you can change the color.

Note that if you want to use a hex value, you'll need to use %23 instead of #, e.g. %23ffffff