如何突破图表主题限制，实现Bokeh（Python 3）全页面（含小部件）的完整外观自定义

我明白你遇到的这个头疼的样式优先级问题——Bokeh的内置样式确实经常会“抢风头”，尤其是字体这类属性，很容易被它的动态JS样式覆盖。下面给你几个从简单到进阶的解决方案，帮你搞定所有小部件的样式自定义：

1. 提升CSS选择器优先级（快速解决） #

你遇到的字体大小不生效，大概率是因为Bokeh给小部件元素加了更具体的类名，或者动态生成了内联样式，导致你的CSS优先级不够。

最简单的办法是用更精准的选择器，或者临时用!important强制覆盖（虽然不推荐滥用，但紧急情况下很管用）：

/* 方案A：针对所有Bokeh小部件的子元素强制设置样式 */
.bk-widget * {
    font-size: 3.0em !important;
    color: red !important;
}

/* 方案B：针对特定小部件类型精准控制，避免影响全局 */
.bk-btn-default, .bk-input, .bk-slider, .bk-select {
    font-size: 3.0em;
    color: red;
}

如果不想用!important，可以打开浏览器开发者工具（F12），选中你要改的小部件，查看它实际的DOM类名（比如输入框可能是.bk-input-text而不是.bk-input），用更具体的选择器来覆盖。

2. 调整CSS加载顺序（更优雅的优先级控制） #

Bokeh的默认样式是先加载的，如果你把自定义CSS放在它之后加载，优先级自然更高。可以通过自定义Jinja2模板来实现：

首先写一个模板文件（比如custom_template.html）：

{% extends base %}

{% block preamble %}
    <!-- 确保自定义CSS在Bokeh默认样式之后加载 -->
    <link rel="stylesheet" href="styles.css">
    <style>
        /* 内联样式优先级高于外部CSS，适合临时调试 */
        .bk-input, .bk-btn-default {
            font-size: 3.0em;
            color: red;
        }
    </style>
{% endblock %}

然后在Python代码里指定使用这个模板：

from bokeh.io import show
from bokeh.models import Button, TextInput, Column

# 读取本地模板文件
with open("custom_template.html") as f:
    custom_template = f.read()

btn = Button(label="Click Me")
input_box = TextInput(value="Test")
layout = Column(btn, input_box)

show(layout, template=custom_template)

3. 用Bokeh Theme API（官方推荐，最稳定） #

其实Bokeh的Theme不仅能改图表样式，还能直接配置小部件的样式！这种方法完全不会被JS覆盖，因为是Bokeh自己生成的内联样式，而且可以在Python端统一管理：

from bokeh.themes import Theme

# 定义自定义主题
custom_theme = Theme(json={
    "attrs": {
        # 给Button设置样式
        "Button": {
            "style": {
                "fontSize": "3.0em",
                "color": "red",
                "backgroundColor": "#f0f0f0"
            }
        },
        # 给TextInput设置样式
        "TextInput": {
            "style": {
                "fontSize": "3.0em",
                "color": "red",
                "border": "2px solid blue"
            }
        },
        # 其他小部件比如Slider、Dropdown都可以在这里配置
        "Slider": {
            "style": {
                "fontSize": "2.5em"
            }
        }
    }
})

# 应用主题到你的布局
show(layout, theme=custom_theme)

这种方法的好处是不需要写CSS，直接用Python字典配置，而且每个小部件类型都能精准控制，非常适合大型项目统一管理样式。

4. 禁用Bokeh默认样式（进阶，完全自定义） #

如果你想彻底摆脱Bokeh的默认样式，自己从头写所有UI，可以在模板里只加载Bokeh的JS，不加载它的默认CSS：

{% extends base %}

{% block resources %}
    <!-- 只加载Bokeh的核心JS和小部件JS -->
    <script src="https://cdn.bokeh.org/bokeh/release/bokeh-2.4.3.min.js"></script>
    <script src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.4.3.min.js"></script>
    <!-- 加载你自己的完整CSS -->
    <link rel="stylesheet" href="styles.css">
{% endblock %}

不过这个方法工作量很大，你需要自己写所有小部件的状态样式（比如 hover、active、disabled 状态），适合需要完全定制UI的场景。

总结一下：如果只是简单改几个样式，用提升CSS优先级的方法最快；如果想长期维护样式，推荐用Theme API，官方支持最稳定；如果需要完全自定义UI，再考虑禁用默认样式。

内容的提问来源于stack exchange，提问作者trvjbr