JupyterLab中Plotly通过CSS变量实现颜色动态同步的方法

核心思路 #

直接在Plotly属性中使用CSS变量，配合React动态修改全局CSS变量，部分场景下监听变量变化手动更新图表即可实现同步。

步骤1：Plotly中直接使用CSS变量 #

Plotly的多数样式属性（如标注背景色、标记颜色等）支持直接传入CSS变量语法，像你给出的例子一样直接写：

fig.add_annotation(
    bgcolor="var(--custom-color-var-that-dynamically-changes)",
    text="动态颜色标注",
    x=0.5, y=0.5,
    showarrow=False
)

# 其他支持的属性示例：散点图标记颜色
fig.add_scatter(
    x=[1,2,3], y=[4,5,6],
    marker={"color": "var(--custom-color-var-that-dynamically-changes)"}
)

渲染后，Plotly会直接把这个变量值传递给对应的DOM元素，自动继承全局CSS变量的最新值。

步骤2：React端动态修改全局CSS变量 #

在JupyterLab的React组件中，通过修改根元素的style属性来更新全局CSS变量，所有使用该变量的元素（包括Plotly图表内的元素）都会自动响应：

// 示例：React组件中触发颜色更新的函数
const updateDynamicColor = (newColor) => {
  // 给根元素设置CSS变量
  document.documentElement.style.setProperty(
    '--custom-color-var-that-dynamically-changes',
    newColor // 可以是hex、rgb、rgba等合法颜色值
  );
};

步骤3：处理Plotly不自动响应的场景 #

少数Plotly属性（比如某些trace的填充色、布局背景色）可能会被Plotly内部转成固定RGB值，不会自动监听CSS变量变化。这种情况下，需要监听CSS变量的变化，手动触发Plotly图表更新：

// 监听根元素的style属性变化，检测CSS变量更新
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.attributeName === 'style') {
      // 获取最新的CSS变量值
      const rootStyle = getComputedStyle(document.documentElement);
      const currentColor = rootStyle.getPropertyValue('--custom-color-var-that-dynamically-changes').trim();
      
      // 找到Plotly图表容器，调用react方法更新
      const plotContainer = document.getElementById('your-plot-div-id');
      if (plotContainer) {
        // 复用现有数据和布局，强制重新渲染
        Plotly.react(plotContainer, plotContainer.data, plotContainer.layout);
      }
    }
  });
});

// 启动监听
observer.observe(document.documentElement, {
  attributes: true,
  attributeFilter: ['style']
});

注意：在Python渲染Plotly图表时，可以通过fig.write_html(div_id="your-plot-div-id")或者JupyterLab的Plotly渲染器指定容器ID，方便后续获取。

关键注意事项 #

• 先测试目标属性是否支持CSS变量：直接写var(--xxx)渲染后，查看对应DOM元素的样式是否正确引用了变量，而不是被转成固定颜色。
• 确保React和Plotly图表在同一页面上下文：JupyterLab的插件式架构中，要保证两者共享同一个全局DOM环境，CSS变量才能全局生效。
• 避免过度更新：如果使用MutationObserver，可添加防抖逻辑，防止频繁触发图表更新影响性能。

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