Custom CSS in Jupyter (Lab) Notebook

Hi,

I’m trying to apply custom CSS to bokeh widgets displayed in a jupyter(lab) notebook. Motivation: Since bokeh ~3.4ish, widget font colors have not played nice with the jupyterlab dark theme - text often renders white on white background.

I’ve added a custom.css in the ~/.jupyter/config/custom directory:

bokeh_widget {
    font-weight: bold;
    color: black;
}

Example ipynb with Widget:

import pandas as pd

from bokeh.layouts import row 
from bokeh.models.widgets import Select
from bokeh.io import show, output_notebook

output_notebook()

months = list(pd.date_range(start='2024-01-01', periods=12, 
                                            freq='ME').strftime('%b'))

sel_month = Select(title='Select Month:', value='All', 
                      options=['All']+months, css_classes=['bokeh_widget'])


def pl(doc):

    doc.add_root(
            row(sel_month)
            )
        
    return pl


show(pl)

Output with jupyterlab 4.3.5 & dark theme:

Unfortunately I know next to nothing about HTML & CSS - problem #1. Suspect/hope there’s an easy solution - patient guidance much appreciated :slightly_smiling_face:

Thanks!

Bokeh elements all live in a shadow DOM so need e.g. :host to target. Here is an example you can follow (I would suggest using Bokeh’s various stylesheet options as in that example)

bokeh/examples/styling/dom/css_classes.py at branch-3.8 · bokeh/bokeh · GitHub