Dark Theme for Panel Widgets?

[Jan]

I want to use panel widgets with JupyterLab dark mode, but I can’t find a way to set panel to a default dark theme. Holoviews plots can do that by setting:

hv.renderer('bokeh').theme = 'dark_minimal'

But what is the equivalent for panel widgets?

Even without doing anything, some of the widgets seem to be switching colors. And the result is messier than when they would at least stay the way they were in light mode.

For example in the case of the DataFrame widget, you can’t even see the numbers anymore because they are white. Also the DataFrame pane is messed up in JupyterLab dark mode. The header and every second row has a black background, so you can’t see the numbers anymore.

df = pd.DataFrame(np.random.randn(10,2))
pn.pane.DataFrame(df)
pn.widgets.DataFrame(df)
pn.widgets.Tabulator(df)

[Material-Scientist]

I was also wondering how to more easily apply themes to panel widgets. I usually display tables & charts as pre-rendered html files:

Tables and some charts automatically apply the template’s theme, but I also have additional configs in addition before saving them to html:

DARK_THEME = Theme(
    json={
'attrs' : {
    'Title':{
        'text_color': "white",
    },
    'Figure' : {
        'background_fill_color': '#2F2F2F',
        'border_fill_color': '#2F2F2F',
        'outline_line_color': '#444444',
    },
    'Grid': {
        'grid_line_dash': [6, 4],
        'grid_line_alpha': .3,
    },

    'Axis': {
        'major_label_text_color': 'white',
        'axis_label_text_color': 'white',
        'major_tick_line_color': 'white',
        'minor_tick_line_color': 'white',
        'axis_line_color': "white"
    },
    'Legend':{
        'background_fill_color': 'black',
        'background_fill_alpha': 0.5,
        'location' : "center_right",
        'label_text_color': "white"
    },
    'ColorBar':{
        'background_fill_color': '#2F2F2F',
        'title_text_color': 'white',
        'major_label_text_color': 'white',
        'major_tick_line_color': 'white',
        'minor_tick_line_color': 'white',
    },
    'Box':{
        'background': '#212121',
        # 'css_classes': ['panel-widget-box']
    },
    'Widget':{
        'background': '#212121',
    }
}
})

# Dark bokeh theme
hv.renderer('bokeh').theme = DARK_THEME
# Allow interactive plotting within Jupyter
css = '''
.bk.panel-widget-box {
  border: hidden !important;
}
'''
pn.extension(raw_css=[css])

It works for the most part, but some stuff doesn’t apply the bokeh theme because they’re panel-widget-boxes:

There’s some guidelines in the Panel docs, but I’ve had issues with the changes actually applying.

[pjsulin]

The docs link is no no longer valid, try this Toggling themes — Panel v1.3.8

I am using: pn.extension(theme=‘dark’), but it is not working for everything, like it doesn;t do anything for JSONEditor