ColorMap not styled for dark themes

[MarcSkovMadsen]

panel==1.5.2

The ColorMap is not styled for dark theme. The background and color of the dropdown is not set. The same for hovering.

import panel as pn
import colorcet as cc

pn.extension()

cmap = pn.widgets.ColorMap(options=cc.palette, ncols=3, swatch_width=100, margin=(0, 0, 200, 0))

pn.template.FastListTemplate(
    sidebar=[cmap],
    main_layout=None,
    theme="dark"
).servable()

Workaround

Something like the css below will help. It won't change hover cols though. And its impossible for me to figure out because I cannot inspect in the browser. Everytime I try to do it, the dropdown closes.

import panel as pn
import colorcet as cc

pn.extension()

CMAP_CSS = (
    "div, div:hover {background: var(--panel-surface-color); color: current}" if pn.config.theme == "dark" else ""
)

cmap = pn.widgets.ColorMap(options=cc.palette, ncols=3, swatch_width=100, margin=(0, 0, 200, 0), stylesheet=[CMAP_CSS])

pn.template.FastListTemplate(
    sidebar=[cmap],
    main_layout=None,
    theme="dark"
).servable()

[paskal98]

i will be glad to take this issue, can you please assign to me?