Компоненты стиля Dash с темной темой начальной загрузки CSS - PullRequest
0 голосов
/ 01 июня 2019

Ниже приведен рабочий пример приложения plotly dash , которое отображает раскрывающийся список на вкладке, а затем отображает предупреждение в результате выбора элемента в раскрывающемся списке.

#!/usr/bin/env python3
import dash
import dash_bootstrap_components as dbc
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output

app = dash.Dash('Example', external_stylesheets=[dbc.themes.DARKLY])
app.title = 'Example'
app.layout = dbc.Tabs([
    dbc.Tab(
        dbc.Card([
            dcc.Dropdown(id='dropdown',
                         options=[
                             { 'label': 'Item 1', 'value': 'foo' },
                             { 'label': 'Item 2', 'value': 'bar' },
                         ],
            ),
            html.Br(),
            html.Div(id='item-display'),
        ], body=True), label='Tab 1')
])

@app.callback(
    Output('item-display', 'children'),
    [Input('dropdown', 'value')]
)
def display_item(v):
    return dbc.Alert(f'You selected Item {value}', color='primary') if v else ''

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

Я использую тему bootswatch darkly .

У меня проблема в том, что я не знаю, как стилизовать dash_core_components.Dropdown с помощью стиля начальной загрузки.

Как видно на изображениях ниже, все элементы dash_bootstrap_components оформлены в соответствии со стилем начальной загрузки, а Dropdown - нет, и фактически текст, который выпадает, почти равен невозможно прочитать, так как это белый текст на очень светлом фоне.

enter image description here enter image description here

В темных образцах выпадающий список выглядит так:

enter image description here

При наведении курсора на опцию фон является «основным» цветом начальной загрузки:

enter image description here

Как мне оформить dcc.Dropdown в соответствии со стилем начальной загрузки?

...