如何从 dash daq Boolean Switch 更改整个页面的配色方案？

Question

抱歉，如果我错过了什么，因为我对 dash 和回调的工作原理还很陌生。所以基本上我正在使用 dash 和 python 开发仪表板应用程序。我的最终目标是实现一个暗模式选项，这将通过 dash daq BooleanSwitch。

我的方法

我实现它的方式是我有两个字典代表两种配色方案：深色和浅色，具有完全相同的键，但配色方案的值不同。我目前正在使用 light dictionary 手动将背景颜色、字体颜色等定义到我的应用程序布局中每个元素的样式选项中。它们的外观如下：

light_theme = {
    'main-background': '#ffe7a6',
    'header-text': '#376e00',
    'sub-text': '#0c5703'
}

dark_theme = {
    'main-background': '#000000',
    'header-text': '#ff7575',
    'sub-text': '#ffd175'
}

然后我在此处将 light_theme 字典调用到我的主要布局代码中：

app.layout = html.Div(children=[
    daq.BooleanSwitch(on=False, id='bool-switch-input'),
    html.Div(id='bool-switch-output'),
    html.H1(children="This is a heading text", id="head-txt", style={
        'color': light_theme['header-text']
    }),
    html.H2(children="This is a subtext", id='sub-txt', style={
        'color': light_theme['sub-text']
    }),
], style={
    'backgroundColor': light_theme['main-background']
})

最后，我使用回调函数从开关上获取值，无论它是打开还是关闭：

@app.callback(Output('bool-switch-output', 'children'),
              Input('bool-switch-input', 'on'))
def update_output(on):
    return on

现在我遇到的问题是，只要打开此开关（暗模式），布局内的所有 html 元素都使用 dark_theme 而不是 light_theme字典。我的印象是，通过简单地交换变量就可以了，但我不确定在应用程序运行时回调函数是否可行。那么，有没有更好的方法呢？

我已经尝试过的：

自定义javascript 设置onclick 属性切换然后相应地改变css 布局。不幸的是没有用，因为根据其他论坛，js 总是首先被触发，每次都会导致空值。
使用 clientside_callbacks，但老实说，我不知道如何让它发挥作用。

如果有人可以推荐其他更好的方法，我将不胜感激。

Answer 1

您正在设计 3 个 html 元素的样式。需要确保他们都有一个 id
callback 现在可以 return style 每个 html 元素风格

import dash
from dash import Dash, dcc, html, Input, Output
from dash.exceptions import PreventUpdate
import dash_daq as daq
import plotly.express as px
import pandas as pd
from jupyter_dash import JupyterDash

app = JupyterDash(__name__)

light_theme = {
    "main-background": "#ffe7a6",
    "header-text": "#376e00",
    "sub-text": "#0c5703",
}

dark_theme = {
    "main-background": "#000000",
    "header-text": "#ff7575",
    "sub-text": "#ffd175",
}

app.layout = html.Div(
    id="parent_div",
    children=[
        daq.BooleanSwitch(on=False, id="bool-switch-input"),
        html.Div(id="bool-switch-output"),
        html.H1(
            children="This is a heading text",
            id="head-txt",
            style={"color": light_theme["header-text"]},
        ),
        html.H2(
            children="This is a subtext",
            id="sub-txt",
            style={"color": light_theme["sub-text"]},
        ),
    ],
    style={"backgroundColor": light_theme["main-background"]},
)


@app.callback(
    [
        Output("parent_div", "style"),
        Output("head-txt", "style"),
        Output("sub-txt", "style"),
    ],
    Input("bool-switch-input", "on"),
)
def update_output(on):
    theme = dark_theme if on else light_theme

    return (
        {"backgroundColor": theme["main-background"]},
        {"color": theme["header-text"]},
        {"color": theme["sub-text"]},
    )


if __name__ == "__main__":
    app.run_server(mode="inline")

如何从 dash daq Boolean Switch 更改整个页面的配色方案？

How do I change the color scheme of a whole page from a dash daq Booleanswitch?

python

css

plotly

plotly-dash