Better Theme Selection Screen

[JetVolcano]

What version of starlight are you using?

0.34.3

What is your idea?

A better selection screen for themes especially in dark mode the background is light and when hovering over the text it makes the button and text white so it blends in.

Why is this feature necessary?

It would be useful for high quality production builds where users may want a better theme selection screen, themes can make or break whether someone uses your product.

Do you have examples of this feature in other projects?

https://starlight-theme-rapide.vercel.app/

Participation

• I am willing to submit a pull request for this feature.

[HiDeoo]

Thanks for the feedback.

especially in dark mode the background is light and when hovering over the text it makes the button and text white so it blends in.

Would you be able to provide a screenshot of such result, I'm not quite entirely sure to understand what is a theme selection screen?

[HiDeoo]

Interesting, I just got access to a Windows machine and tested on the exact same Firefox version but was unable to reproduce:

Any chance you may be using a browser extension that could cause this behavior maybe?

I'll try to ask a few other Windows users to see if they can replicate as it would be quite difficult to address the issue and confirm a fix without having an easy access to a reproduction.

[JetVolcano]

I disabled my extensions and themes for firefox and the issue is still happening.

[JetVolcano]

Also look at the dark mode background on firefox compared to other browsers

[HiDeoo]

Ignoring your issue as I'm still unable to reproduce it, I did a bit more investigation on the menu appearance on Windows when using Firefox.

Turns out this is a Firefox issue tracked here and a similar screenshot is shown in the bug report.

What seems to happen is that Firefox, only on Windows, uses the <select> element background color as the popup menu background color containing the <option> elements and also applies padding to the popup menu. In Starlight, we set the background color of the <select> element to transparent which causes that weird behavior.

One workaround could be to set the expected background color of the <select> element rather than transparent, e.g. for example for the select element in the header on desktop:

Altho, this would force us to set the background color of the <select> element everywhere we use one, as the expected background color is not the same everywhere and can also change between screen sizes. This would also not work when the expected background color is actually transparent (e.g. in the Starlight documentation homepage).

[JetVolcano]

Thanks