Select options not visible when using MaterialTemplate dark theme

[jazl]

When using MaterialTemplate dark theme, the options for a Select widget are shown with a white background. This makes the options invisible until the user hovers over them.

Here is the code:

import panel as pn
pn.extension()
template = pn.template.MaterialTemplate(title="Select Test", theme='dark')
states = pn.widgets.Select(name='States', options=['Arizona', 'California', 'Connecticut', 'Kansas', 'Texas'], value='California')
template.main.append(states)
template.show()

Is there a solution for this?

[ahuang11]

I can’t reproduce; what version of Panel do you have?

[jazl]

Thanks for looking into it! I am using Panel 1.3.8.

Sorry, but I neglected to mention the first time that I do not see this issue on MacOS Chrome.
I can reproduce in Windows using Chrome, Edge, and Firefox (Firefox renders a light grey background)

[ahuang11]

Thanks! I think this can be filed as a GitHub issue.

If you’d like to help, you can inspect the element on the Chrome browser and see what CSS class needs to be updated.

[jazl]

Looks like the var --design-secondary-color affects this?

[ahuang11]

Thanks for investigating! Can you report this on Panel’s GitHub?

[sylvaint]

@jazl

import panel as pn
pn.extension()
template = pn.template.MaterialTemplate(title="Select Test", theme='dark')
states = pn.widgets.Select(name='States', options=['Arizona', 'California', 'Connecticut', 'Kansas', 'Texas'], value='California')
template.main.append(states)
template.show()

Latest Panel 1.4.1
Tested on MacOS Chrome, Brave and Safari.

[jazl]

I’ve submitted an issue:

Select options not visible when using MaterialTemplate dark theme

BTW, I upgraded to 1.4.2 but issue still remains.
Thanks!