Instantsearch.js: Default theme causes white text on white background on dark GTK+ theme

[Majkl578]

Describe the bug 🐛

Dark GTK+3 (used on Gnome specifically) theme set dark-grey background with white text.
This library sets background to white explicitly, but does not set font color, resulting in _white on white_.

To Reproduce 🔍
Steps to reproduce the behavior:

1. Install Gnome 3
2. Enable GTK+3 dark mode (if not enabled)
3. Create a searchbox input
4. Type text into the input

Expected behavior 💭
Either don't change background color or also appropriately change font color.

Screenshots 🖥
Default dark GTK+3 behavior:

With instantsearch.js:

Environment:

• OS: Linux, Gnome with dark GTK+3 theme
• Browser: Firefox
• Version: 62

[Haroenv]

Good call, thanks! We should probably _not_ change the background color I think

[bobylito]

Since it's not instantsearch.js is not using the common them of InstantSearch just yet, we need to fix that internally first. If you're up for a contribution @Majkl578 that would be veryyyyyy appreciated :)

[Majkl578]

Thanks, I'm probably not the right guy for _any_ frontend, maybe @senseexception would like to pick this up? :wink:

[SenseException]

I'm neither a frontend dev, but this hasn't stopped me doing frontend stuff in the past.

My vacation will be over soon, so maybe I can put this on my todo list.

[Haroenv]

It actually would be as simple as removing

https://github.com/algolia/instantsearch.js/blob/62bac743ab3aa679a4e5f10c6e8534b43e80ffcf/src/css/theme/_search-box.scss#L12

or adding color: $black after it

[SenseException]

Okay, looks like a no-brainer that won't take much time.

[SenseException]

I guess we should choose to add color: $black instead of removing the background color. In case of websites, that only implemented their own text color but not a background color, removing background: $white might result in similar problems as described by @Majkl578.

If we keep background: $white, the compatibility is still given for those who didn't configured their own background color. Adding color: $black will keep the search-box text readable for every desktop theme.
For the integration on a website, the colors should be set anyway by the designer to prevent off-colored results.

[bobylito]

That sounds reasonable @SenseException, adding color: $black seems to be the way to go 👍