如何增大Bokeh工具栏高度？含图标颜色调整及样式表适配需求

你可以通过自定义CSS来实现这两个需求，和你调整标签尺寸的思路完全一致，具体操作如下：

1. 编写自定义CSS代码 #

直接针对Bokeh工具栏的类名设置样式，下面是适配你需求的代码：

/* 增大工具栏高度，调整内边距让空间更充裕 */
.bk-toolbar {
    height: 60px; /* 按需调整，默认高度约30px */
    padding: 8px 12px;
    background-color: #f8f9fa; /* 可选：加浅背景色让工具栏更突出 */
}

/* 修改工具栏图标的默认颜色 */
.bk-toolbar-button .bk-icon {
    fill: #2c3e50; /* 换成你想要的深色，默认是灰色 */
    width: 24px; /* 可选：同时放大图标尺寸 */
    height: 24px;
}

/* 鼠标悬停时的图标颜色，提升交互反馈 */
.bk-toolbar-button:hover .bk-icon {
    fill: #3498db;
}

2. 将CSS应用到你的Bokeh文档 #

有两种简单的方式添加这段样式：

• 方式一：在Python代码中直接添加
  如果是用curdoc()开发（比如Bokeh Server应用），可以直接把CSS字符串添加到文档：

  from bokeh.plotting import figure, curdoc
  from bokeh.models import Tabs, Panel
  
  # 创建你的地图figure
  map_figure = figure(title="内嵌地图", toolbar_location="above")
  # ... 地图绘制代码 ...
  
  # 添加自定义CSS
  custom_css = """
  .bk-toolbar {
      height: 60px;
      padding: 8px 12px;
      background-color: #f8f9fa;
  }
  .bk-toolbar-button .bk-icon {
      fill: #2c3e50;
      width: 24px;
      height: 24px;
  }
  .bk-toolbar-button:hover .bk-icon {
      fill: #3498db;
  }
  """
  curdoc().add_style(custom_css)
  
  # 组装Tabs和Panel
  map_panel = Panel(child=map_figure, title="地图标签")
  tabs = Tabs(tabs=[map_panel])
  curdoc().add_root(tabs)
  

• 方式二：嵌入到生成的HTML中
  如果是生成静态HTML文件，可以在保存时通过resources参数引入外部CSS，或者直接在HTML的<style>标签里插入上述代码。

3. 可选：只修改地图标签页的工具栏 #

如果不想影响其他图表的工具栏，可以给地图的figure添加自定义类名，再针对性设置样式：

# 创建地图figure时添加自定义类
map_figure = figure(title="内嵌地图", toolbar_location="above", css_classes=["map-toolbar"])

然后修改CSS选择器：

/* 只针对带map-toolbar类的figure的工具栏 */
.map-toolbar .bk-toolbar {
    height: 60px;
    padding: 8px 12px;
    background-color: #f8f9fa;
}

.map-toolbar .bk-toolbar-button .bk-icon {
    fill: #2c3e50;
    width: 24px;
    height: 24px;
}

这样就能精准调整地图标签页的工具栏，不会影响其他标签里的图表。

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