Add background color to option elements for improved visibility

[clicktodev]

Improved visibility of option elements by adding a background color. this is because select transparency doesn't apply to option elements so it defaults to white which breaks in dark mode

before

after

[github-actions]

📦 Docs artifacts are ready: https://github.com/elixir-lang/ex_doc/actions/runs/12876175714/artifacts/2458509106

[josevalim]

@hichemfantar thank you, but this is weird/unexpected. Which browser/OS are you using? Instead of adding a color, can we ask it to add the browser default styling instead, based on the browser defaults for light/dark mode?

[clicktodev]

It is the default browser style, the reason this is happening is because the select has background transparency set which also applies to the options. But since options in windows and Linux don’t support the transparency style, they end up going white which causes the text to blend in with the bg since text in dark mode becomes whiteish

[clicktodev]

This is expected behavior and the fix as seen above is simple. It applies to all selects in the website

[josevalim]

But shouldn't we set it only for the option inside the sidebar though? To keep it contained?

[clicktodev]

First the select is being used in multiple places with transparent bg.
next time another transparent select is added, one could easily forget to set the bg color because the behavior is only visible in dark mode and on certain OSes.

also this fix makes sure all select options follow the theme colors by default, users can easily override with a special selector but i hardly think that will ever be necessary.

[josevalim]

💚 💙 💜 💛 ❤️