Bokeh dark theme lost when removing and adding HoloViews pane

[MarcSkovMadsen]

Panel 0.10.2
Bokeh 2.2.3

I would like to demo a nice styling of all Panel components in the Fast design style by enabling them to select and navigate to any Panel component from a drop down.

I can see if you switch away from the HoloViews pane and back the dark theme is lost. I would expect the theme to be applied consistently.

import numpy as np
import holoviews as hv
import panel as pn
import param

hv.extension("bokeh")
pn.extension("echarts")

ACCENT_REST = "#DF3874"


def _create_hvplot():
    # Generate some data
    cl1 = np.random.normal(loc=2, scale=0.2, size=(200, 200))
    cl2x = np.random.normal(loc=-2, scale=0.6, size=200)
    cl2y = np.random.normal(loc=-2, scale=0.1, size=200)
    cl3 = np.random.normal(loc=0, scale=1.5, size=(400, 400))
    # Create an overlay of points and ellipses
    clusters = (
        hv.Points(cl1).opts(color="blue").opts(tools=["hover"])
        * hv.Points((cl2x, cl2y)).opts(color="green")
        * hv.Points(cl3).opts(color="#FDDC22")
    )
    plot = (
        clusters
        * hv.Ellipse(2, 2, 2).opts(line_width=3, color=ACCENT_REST)
        * hv.Ellipse(-2, -2, (4, 2)).opts(line_width=3, color=ACCENT_REST)
    )
    return plot


def _create_echarts_plot():
    echart = {
        "tooltip": {},
        "legend": {"data": ["Sales"]},
        "xAxis": {
            "data": ["shirt", "cardign", "chiffon shirt", "pants", "heels", "socks"],
            "axisLine": {"lineStyle": {"color": "#ccc"}},
        },
        "yAxis": {
            "axisLine": {"lineStyle": {"color": "#ccc"}},
        },
        "series": [
            {
                "name": "Sales",
                "type": "bar",
                "data": [
                    1.0,
                    1.2,
                    1.4,
                    1.6,
                    1.8,
                    2.0,
                ],
                "itemStyle": {"color": "#DF3874"},
            }
        ],
        "responsive": True,
    }
    text_style = {"color": "#ccc"}
    update = ["legend", "xAxis", "yAxis"]
    for upd in update:
        echart[upd]["textStyle"] = text_style
    return echart


OPTIONS = [pn.pane.HoloViews, pn.pane.ECharts]


class App(param.Parameterized):
    option = param.ObjectSelector(pn.pane.HoloViews, objects=OPTIONS)

    def __init__(self, **params):
        super().__init__(**params)

        self.panel = pn.Column(sizing_mode="stretch_both")
        self._update_panel()

    @param.depends("option", watch=True)
    def _update_panel(self, *events):
        if self.option == pn.pane.HoloViews:
            component = pn.pane.HoloViews(_create_hvplot(), sizing_mode="stretch_both")
        else:
            component = pn.pane.ECharts(
                _create_echarts_plot(), min_height=400, min_width=200, sizing_mode="stretch_both"
            )
        self.panel[:] = [component]


pn.config.sizing_mode = "stretch_width"
app = App()
pn.template.VanillaTemplate(
    title="Test",
    theme=pn.template.vanilla.DarkTheme,
    sidebar=[pn.Param(app.param.option, expand_button=False)],
    main=[app.panel],
).servable()

[MarcSkovMadsen]

Workaround

If you store the theme _bokeh_theme = template.theme.bokeh_theme in a variable then you can provide it to the HoloViews pane via pn.pane.HoloViews(_create_hvplot(), theme=_bokeh_theme).