DAQ
ThemeProvider
  • Control the theme of DAQ components
  • Primary color has to be changed directly with setattr, secondary color, detail color, and dark and be set with theme
  • import dash
    import dash_daq as daq
    import dash_html_components as html
    
    external_stylesheets = ['https://codepen.io/anon/pen/mardKv.css']
    
    app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
    
    theme =  {
        'dark': True,
        'detail': '#007439',
        'primary': '#00EA64',
        'secondary': '#6E6E6E',
    }
    
    rootLayout = html.Div([
        daq.Gauge(
            min=0,
            max=10,
            value=6,
            color=theme['primary'],
            id='darktheme-daq-gauge',
            className='dark-theme-control'
        ), html.Br(),
    ])
    
    
    app.layout = html.Div(id='dark-theme-container', children=[
        html.Div(
            id='theme-colors',
            children=[
                daq.ColorPicker(
                    id='primary-color',
                    label='Primary color',
                    value=dict(hex='#00EA64')
                ),
                daq.ColorPicker(
                    id='detail-color',
                    label='Detail color',
                    value=dict(hex='#007439')
                )
            ]
        ),
        html.Div(id='dark-theme-components', children=[
            daq.DarkThemeProvider(theme=theme, children=rootLayout)
        ], style={'border': 'solid 1px #A2B1C6', 'border-radius': '5px', 'padding': '50px', 'margin-top': '20px'})
    ], style={'padding': '50px'})
    
    
    @app.callback(
        dash.dependencies.Output('dark-theme-components', 'children'),
         [dash.dependencies.Input('primary-color', 'value'),
         dash.dependencies.Input('detail-color', 'value')]
    )
    def edit_theme(p, d):
    
        if p is not None:
            theme.update(
                primary=p['hex']
            )
            for child in getattr(rootLayout, 'children'):
                if hasattr(child, 'color'):
                    setattr(child, 'color', p['hex'])
    
        if d is not None:
            theme.update(
                detail=d['hex']
            )
        return daq.DarkThemeProvider(theme=theme, children=rootLayout)
    
    if __name__ == '__main__':
        app.run_server(debug=True)