Dark mode dash, how to see all the page right, and to take away one of the buttons

Dash Python
1

Hi

I would like to have a button, on the top right corner to make the whole view black or white. How do I do this?

from dash import Dash, html, Input, Output, State
import dash_daq as daq

app = Dash(__name__)

theme = {
    'dark': True,
    'detail': '#007439',
    'primary': '#00EA64',
    'secondary': '#6E6E6E',
}

rootLayout = html.Div([
    daq.BooleanSwitch(
        on=True,
        id='darktheme-daq-booleanswitch',
        className='dark-theme-control'
    ), html.Br(),
])


app.layout = html.Div(id='dark-theme-container', children=[
    daq.ToggleSwitch(
        id='toggle-theme',
        #label=['Light', 'Dark'],
        value=True
    ),
    
    html.Div(id='dark-theme-components-1', children=[
        daq.DarkThemeProvider(theme=theme, children=rootLayout)
    ], style={
        'border': 'solid 1px #A2B1C6',
        'border-radius': '5px',
        'padding': '0px',
        'margin-top': '0px',
        'hight': '100%',
        'width':'100%'
    })
], style={'padding': '0px'})

@app.callback(
    Output('dark-theme-components-1', 'style'),
    Input('toggle-theme', 'value'),
    State('dark-theme-components-1', 'style')
)
def switch_bg(dark, currentStyle):
    if(dark):
        currentStyle.update(backgroundColor='#303030')
    else:
        currentStyle.update(backgroundColor='white')
    return currentStyle

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

Hi,

take a look at this:

@Joao82 's app also uses the theme switch:

3 Likes