如何在Dash应用中实现浅色到深色Bootstrap主题的切换？

你已经完成了本地资源配置和开关组件的准备，接下来可以通过回调动态修改CSS链接的href属性来实现主题切换，具体操作如下：

1. 在布局中添加可控的CSS链接标签 #

在你的app.layout里，手动添加一个带有ID的html.Link组件，指定初始的浅色主题CSS路径，同时保留已有的dbc.Switch组件：

from dash import html, Input, Output, callback
import dash_bootstrap_components as dbc

app.layout = html.Div([
    # 可控的主题CSS链接
    html.Link(
        id="theme-css",
        rel="stylesheet",
        href="/assets/light/bootstrap.min.css"  # 默认加载浅色主题
    ),
    # 已有的主题切换开关
    dbc.Switch(
        id="theme-switch",
        label="切换深色主题",
        value=False  # False对应浅色，True对应深色
    ),
    # 你的其他页面内容...
])

2. 编写回调函数实现切换逻辑 #

通过回调监听开关组件的value变化，动态修改html.Link的href属性，切换到对应的主题CSS文件：

@app.callback(
    Output("theme-css", "href"),
    Input("theme-switch", "value"),
    prevent_initial_call=False  # 允许初始加载时执行回调设置默认主题
)
def toggle_theme(is_dark_mode):
    # 根据开关状态返回对应主题的CSS路径
    if is_dark_mode:
        return "/assets/dark/bootstrap.min.css"
    else:
        return "/assets/light/bootstrap.min.css"

关键说明 #

• Dash会自动映射/assets/路径到项目根目录下的assets文件夹，所以路径写法无需额外配置
• 确保light/和dark/文件夹下的bootstrap.min.css分别是对应主题的文件（比如深色主题用Bootstrap Slate的CSS文件）
• 这种方式通过替换CSS链接实现主题切换，会自动重载对应的样式资源，无需刷新页面

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