Bokeh layout background color
I am playing with the Bokeh sliders demo (source code here ) and I am trying to change the background color of an entire page. While changing the shape's color is easy with background_fill_color
and border_fill_color
, the rest of the layout still appears on top of the white background. Is there an attribute I can add to the theme that will allow me to set the color through curdoc().theme
?
source to share
There is currently no Python property that controls the background color of HTML. HTML and CSS are vast territory, so instead of trying to create an appropriate Python property for every possible styling option, Bokeh provides a general mechanism for providing your own HMTL templates so that any standard CSS can be applied.
The easiest way to do this is to add the file templates/index.html
to your Bokeh app in a directory style . The template should be Jinja2 template . In <head>
should be two substitutions identified:
-
{{ bokeh_css }}
-
{{ bokeh_js }}
and also two required in <body>
:
-
{{ plot_div }}
-
{{ plot_script }}
The app will appear wherever it plot_script
appears in the template. Apart from that, you can apply whatever HTML and CSS you need. You can see a concrete example here:
https://github.com/bokeh/bokeh/blob/master/examples/app/crossfilter
A twisted template that will change the background of the page might look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body { background: #2F2F2F; }
</style>
<meta charset="utf-8">
{{ bokeh_css }}
{{ bokeh_js }}
</head>
<body>
{{ plot_div|indent(8) }}
{{ plot_script|indent(8) }}
</body>
</html>
source to share
Bk-root style change worked for me:
from bokeh.resources import Resources
from bokeh.io.state import curstate
from bokeh.io import curdoc, output_file, save
from bokeh.util.browser import view
from bokeh.models.widgets import Panel, Tabs
from bokeh.plotting import figure
class MyResources(Resources):
@property
def css_raw(self):
return super().css_raw + [
""".bk-root {
background-color: #000000;
border-color: #000000;
}
"""
]
f = figure(height=200, width=200)
f.line([1,2,3], [1,2,3])
tabs = Tabs( tabs=[ Panel( child=f, title="TabTitle" ) ], height=500 )
output_file("BlackBG.html")
curstate().file['resources'] = MyResources(mode='cdn')
save(tabs)
view("./BlackBG.html")
source to share