Use Algolia's dark theme when needed

[zbynek]

Before #7869 there were 3 elements with poor contrast in dark mode and the popup looked fine in light mode. That PR fixed contrast for one of the elements in dark mode, which is an improvement, but comes at the cost of lower contrastin light mode. The two symbols marked in red remain barely isible:

I think the preferable approach here is to use Algolia's own dark styles in dark mode and keep light mode as is.

CC @biru-codeastromer

[biru-codeastromer]

Thanks for tagging me! I really appreciate you building on the fix from my PR (#7869). Your idea of using Algolia's own dark theme for better contrast looks fantastic. I also got to learn a lot from your changes, which will definitely help me moving forward. Thanks again for your effort and for sharing these insights!

[biru-codeastromer]

One suggestion -

Do you think we can have a greyish border around the searchbox in dark theme ?
How about it ? Since I think it will make the searchbox a bit more distinctly looked on in the dark theme ;which is not present now unless we hover over it .

[biru-codeastromer]

Also how about keeping the colour theme of the text in dark theme consistent with the other part of it by adding a CSS for it via

[data-theme="dark"] .DocSearch-NoResults p.DocSearch-Title {
  color: rgba(255, 255, 255, 0.634);
  font-weight: bold;
}

in jenkins.css

WDYT on this ?

[biru-codeastromer]

LGTM now . Thanks very much !

[krisstern]

Thanks @zbynek!