Bokeh theme not applied to all UI elements

I’m creating a UI with a tabbed layout but I’m having trouble applying the theme to all tabs. Ive reduced this to the example code below.

from bokeh.models import TabPanel, Tabs
from bokeh.plotting import figure, show
from bokeh.io import curdoc
from bokeh.models import Button
from bokeh.layouts import gridplot

p1 = figure(width=300, height=300, sizing_mode="stretch_both")
p1.circle([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], size=20, color="navy", alpha=0.5)
tab1 = TabPanel(child=p1, title="circle")

p2 = figure(width=300, height=300, sizing_mode="stretch_both")
p2.line([1, 2, 3, 4, 5], [6, 7, 2, 4, 5], line_width=3, color="navy", alpha=0.5)
tab2 = TabPanel(child=p2, title="line")

doc = curdoc()
doc.theme = "dark_minimal"

gridArray = []
aButton = Button(label="OK", button_type="primary")
gridArray.append([aButton])
gridPanel = gridplot(children = gridArray, sizing_mode="stretch_both")
rTab = TabPanel(child=gridPanel,  title="Right Tab")

show(Tabs(tabs=[tab1, tab2, rTab], sizing_mode="stretch_both"))

I assumed that the ‘Right Tab’ (this only contains a Button in this example) would have the same theme as the other two tabs.

It appears I’m not understanding something. Can anyone explain how to ensure the theme is applied to the gridplot tab in the above example ?

Thanks

Paul

@pja Themes really only apply to plots.

Bokeh’s themes are a set of pre-defined design parameters that you can apply to your plots

If you want to style DOM elements, you would need to use CSS for that, either by programmatically setting stylesheets properties

container.stylesheets.append(":host { border: 10px solid grey; }")

or by adding css_classes and embedding in pages with your own stylesheets in them.

Thanks for clarifying that and for the advice on how to use CSS on non plot entities.

Paul

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.