Plotly Dash文档采用何种深色主题？如何创建全深色Dash应用？

首先明确：Dash官方文档的定制深色样式并未公开为可直接导入的主题包，无法直接套用。不过有两个简便方案可以实现全组件统一的深色主题：

方案一：结合Dash Bootstrap Components + 自定义CSS覆盖核心组件 #

你已经在用dbc.themes.CYBORG，只需要补充自定义CSS来修正dcc.Tabs和dcc.RangeSlider的浅色样式：

1. 在项目根目录创建assets文件夹（Dash会自动加载该目录下的CSS文件）
2. 在assets里新建dark-theme.css，写入以下样式：

/* 全局深色基础样式 */
body {
  background-color: #2b3035;
  color: #ccc;
}

/* 修正dcc.Tabs深色样式 */
.dcc-tabs {
  background-color: #2b3035;
  border-bottom: 1px solid #444;
}
.dcc-tabs .tab {
  color: #ccc;
  background-color: #2b3035;
  border: 1px solid #444;
  border-bottom: none;
}
.dcc-tabs .tab--selected {
  color: #fff;
  background-color: #1a1d20;
  border-color: #444;
  border-bottom: 1px solid #1a1d20;
}

/* 修正dcc.RangeSlider深色样式 */
.rc-slider {
  background-color: #444;
}
.rc-slider-track {
  background-color: #007eff;
}
.rc-slider-handle {
  border-color: #007eff;
  background-color: #fff;
}
.rc-slider-dot {
  border-color: #666;
  background-color: #2b3035;
}
.rc-slider-dot-active {
  border-color: #007eff;
}
.rc-slider-mark-text {
  color: #ccc;
}

3. 保持原有的Dash初始化代码，CSS会自动生效：

import dash
import dash_bootstrap_components as dbc
from dash import dcc, html

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

# 示例布局，包含Tabs和RangeSlider
app.layout = html.Div([
    dcc.Tabs(id='tabs-example', value='tab-1', children=[
        dcc.Tab(label='标签1', value='tab-1'),
        dcc.Tab(label='标签2', value='tab-2'),
    ]),
    dcc.RangeSlider(0, 100, 1, value=[20, 80], id='range-slider'),
    dcc.Graph(figure={'data': [{'x': [1,2,3], 'y': [4,5,6]}], 'layout': {'template': 'plotly_dark'}})
])

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

方案二：使用Dash Mantine Components的深色主题 #

如果愿意切换到dash-mantine-components（Dash官方推荐的组件库之一），它原生支持深色模式，且所有组件样式统一，无需额外CSS：

1. 安装依赖：

pip install dash-mantine-components

2. 初始化应用并启用深色主题：

import dash
from dash import dcc, html
import dash_mantine_components as dmc

app = dash.Dash(__name__, external_stylesheets=[dmc.theme.DEFAULT_COLORS])

app.layout = dmc.MantineProvider(
    theme={'colorScheme': 'dark'},
    children=[
        dmc.Tabs(value='tab-1', children=[
            dmc.Tab(label='标签1', value='tab-1'),
            dmc.Tab(label='标签2', value='tab-2'),
        ]),
        dmc.RangeSlider(min=0, max=100, value=[20, 80]),
        dcc.Graph(figure={'data': [{'x': [1,2,3], 'y': [4,5,6]}], 'layout': {'template': 'plotly_dark'}})
    ]
)

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

这两种方案都能实现全组件统一的深色主题，方案一适合继续使用现有dbc和dcc组件的场景，方案二更省心，样式一致性更好。

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