检索数据颜色引导主题 plotly-dash答案

【问题标题】：Retrieve data colors bootstrap theme plotly-dash检索数据颜色引导主题 plotly-dash
【发布时间】：2022-11-13 11:31:18
【问题描述】：

我正在使用 Python 中的 Plotly-Dash 库构建一个应用程序。我正在使用带有Lumen 主题的引导组件来使一切看起来都很好（对于DCC 组件，我也在使用这个stylesheet，但我认为它不相关）。多亏了这些样式表，我的绘图图看起来符合主题，包括数据颜色（例如饼图中的数据）。

现在我添加了一个显示错误/警告/有效值的新图表。为了使这些颜色直观，我为数据分配了自定义颜色（红色错误、黄色警告、有效绿色）。我希望这些颜色的阴影来自流明主题的默认数据颜色，所以一切看起来都是一致的。

现在我当然可以通过截屏、检查 RGB 并在 python 中硬编码它们来“手动”计算 RGB 值。但是，我正在寻找更好的方法。是否有一个 python 函数可以用来检索流明默认数据颜色值？或者我可以在某处的 css 中找到它们吗？（我远非 CSS 专家）

谢谢你的帮助！

【问题讨论】：

标签： python plotly-dash

【解决方案1】：

两个可能更多的解决方案：

从 CSS 文件中猜测

Download the Lumen package using the link you provided，解压，然后打开lumen/theme/boostrap.css文件。例如，有些样式是不言自明的

    .btn-warning {
      color: #ffffff;
      background-color: #ff851b;
      border-color: #ff7701;
    }

其中包含定义警告按钮样式的颜色。 .btn-success、.btn-danger等也有类似的定义。

通过检查元素确定

Access the Lumen live preview from the link you provided。右键单击您想了解其样式详细信息的任何元素，然后选择检查.在右侧显示的窗格底部，在风格选项卡，您将看到应用于检查元素的级联样式。您很可能会在前几种样式之一中找到您想要的答案。对于警告按钮，see example image here。您很可能在.btn-warning 中寻找background-color。

无论采用哪种方法，如果您想要颜色的 RGB 表示，您可以使用converter 将十六进制颜色代码转换为 RGB。

【讨论】：