通过python/dash从引导样例主题检索十六进制或RGB值

Question

我目前正在使用dash创建仪表板，并使用plotly创建图形。我正在使用带有引导组件的引导样本主题（https://bootswatch.com/）来设置仪表板的样式，我想知道是否有办法将主、次、成功等颜色检索为RGB或十六进制，这样我就不必硬编码，然后可以将它们解析为绘图函数，以设置同一主题中的图形样式

Answer 1

在撰写本文时，还没有一种方法可以只使用Python

dash引导组件主题只是一个指向样式表的uri

>>> dbc.themes.BOOTSTRAP
https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css

对于external_stylesheetslink中的样式表，将生成元素并将其添加到文档中

因此，主题或应用程序上没有保存css变量值的属性

---

解决方案是使用^{}：

import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Output, Input
import dash_bootstrap_components as dbc

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = html.Div([dcc.Store(id="intermediate-store"), dcc.Store(id="color-store")])

app.clientside_callback(
    """
    function(val) {
        const bodyStyles = window.getComputedStyle(document.body);
        return {
            primary: bodyStyles.getPropertyValue(" primary"),
            secondary: bodyStyles.getPropertyValue(" secondary"),
            success: bodyStyles.getPropertyValue(" success"),
        };
    }
    """,
    Output("intermediate-store", "data"),
    Input("intermediate-store", "data"),
)


@app.callback(
    Output("color-store", "data"),
    Input("intermediate-store", "data"),
)
def update_output_div(data):
    # data equals: {'primary': '#007bff', 'secondary': '#6c757d', 'success': '#28a745'}
    return data


if __name__ == "__main__":
    app.run_server(debug=True)

因此，上面代码中的想法是在客户端回调中使用Javascript来检索css变量并将它们存储在中间^{}中。当它被存储时，我们可以使用另一个回调来检索作为字典的值，并对其进行处理

您可以在触发第二个回调时设置一个变量来使用它，也可以在其他回调中使用State("color-store", "data")