Dynamic Form/Page creation using Dash Pages

Here you are, clientside callback to apply overall theme to the body:

jquery version

app.clientside_callback(
    """
        function (t) {
            if (t) {
                $("body").removeClass('dark')
            } else {
                $("body").addClass('dark')
            }
            return ''
        }
    """,
    Output('switchTheme','data'),
    Input(ThemeSwitchAIO.ids.switch("theme"), "value"),
)

JS version:

app.clientside_callback(
    """
        function (t) {
            if (t) {
                document.body.classList.remove('dark')
            } else {
                document.body.classList.add('dark')
            }
            return ''
        }
    """,
    Output('switchTheme','data'),
    Input(ThemeSwitchAIO.ids.switch("theme"), "value"),
)

Just add a dcc.Store of id=‘switchTheme’ and you are set.

1 Like