10

I'm playing around with the Bokeh sliders demo (source code here), and I'm trying to change the background color of the entire page. Though changing the color of the figure is easy using background_fill_color and border_fill_color, the rest of the layout still appears on top of a white background. Is there an attribute I can add to the theme that will allow me to set the color via curdoc().theme?

nbubis
  • 2,304
  • 5
  • 31
  • 46

5 Answers5

7

There's not currently any Python property that would control the HTML background color. HTML and CSS is vast territory, so instead of trying to make a corresponding Python property for every possible style option, Bokeh provides a general mechanism for supplying your own HMTL templates so that any standard familiar CSS can be applied.

This is most easily accomplished by adding a templates/index.html file to a Directory-style Bokeh App. The template should be Jinja2 template. There are two substitutions required to be defined in the <head>:

  • {{ bokeh_css }}
  • {{ bokeh_js }}

as well as two required in <body>:

  • {{ plot_div }}
  • {{ plot_script }}

The app will appear wherever the plot_script appears in the template. Apart from this, 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 boiled down template that changes the page background 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>
bigreddot
  • 33,642
  • 5
  • 69
  • 122
  • @bigreddot I have the code as it is, from github link which you shared(Crossfilter example) but I still have the background as white. I had changed the hex number to #000000. Any idea why its still white? – joel.wilson Jan 13 '18 at 18:37
3

Changing the .bk-root style 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")
Chris
  • 31
  • 2
2

If you are using row or column for displaying several figures in the document, a workaround is setting the background attribute like this:

curdoc().add_root(row(fig1, fig2, background="beige"))

dduque
  • 338
  • 4
  • 16
0

I know it is not the cleanest way to do it, but a workaround would be to modify file.html inside bokeh template folder

FILE PATH

CODE SNIPPET

MBS
  • 9
  • 3
-1

From Bokeh documentation:

The background fill style is controlled by the background_fill_color and background_fill_alpha properties of the Plot object:

from bokeh.plotting import figure, output_file, show

output_file("background.html")

p = figure(plot_width=400, plot_height=400)
p.background_fill_color = "beige"
p.background_fill_alpha = 0.5

p.circle([1, 2, 3, 4, 5], [2, 5, 8, 2, 7], size=10)

show(p)

plot with non-white background

Jeremy Caney
  • 7,102
  • 69
  • 48
  • 77
harabat
  • 127
  • 2
  • 5
  • 1
    this does not change the background color of the entire figure though, e.g. the ticks are still on white background – pfincent Oct 15 '20 at 14:57