Dynamic Form/Page creation using Dash Pages

Weird.

It didn’t work for me when I was trying to login in, it never updated the users state to be logged in.

Even though the header area was logged in.

Unless it has to do with the parentheses?

Check out the note on this page: Live Updates | Dash for Python Documentation | Plotly

Heads up! You need to write app.layout = serve_layout not app.layout = serve_layout() . That is, define app.layout to the actual function instance.

2 Likes

@marketemp,

Give that a test.

That was it! How did you know I made that mistake, as I don’t see signs of it in this thread, or was it just an experienced guess?

Now here is one more problem-solver question. Whenever I change or refresh the page, the layout updates as the demo proves. But if you click on any of the form fields in the function, the callback operates as intended without a layout update, which makes sense. What I need is a layout update whenever ThemeSwitchAIO is switched because I have my own set of light|dark className values to accentuate the light and dark theming. Without this update, a few of my Div backgrounds are stuck on whatever things were set to on the last layout update. Is this possible, or should I just remove this and stick with the BootStrap theming 100%?

So thankful this was figured out!

1 Like

I believe my original design had the parentheses. Lol.

Can you just do the styling through css and classes?

I am doing the styling through css classes but they are my classes and not bootstrap classes which would reverse with the ThemeSwitch. Therefore they get set to light|dark when the layout is last updated and not changed after hitting ThemeSwitchAIO.

I can survive without this, but the pages look much better if this is working.

How are you triggering the swap? If you piggyback on the same trigger, you should be able to alter your classes to the toggled design.

I have a var that sets my Div classNames to:

'g-0 border rounded overflow-hidden shadow-sm h-md-250 '\
'position-relative px-2 pb-2 my-2 ' + my_light_or_dark_classname

so even if I switch the var after a ThemeSwitchAIO update, the background is set with the prior layout update. Everything else nicely reverses except this background and another one I have for the fonts as the natural Slate font is a tweaky gray and I want white.

please let me know if there’s a fancier way to get these CSS settings implemented.

On the css sheet you can do this:

.mycustomclass {
  <place light mode here>
}

.slate .mycustomclass {
 <place dark mode here>
}

I don’t know what class the templates change to, but I think that should give you an idea.

I’ve defined

.mkt-paper {background-color: #F8F8F8;}
.slate .mkt-paper {background-color: #222222;}

and the light mode operates for both light and dark

You need to look at the class of the body when it gets applied in the dark mode. I don’t know what that class is.

@AnnMarieW hate to bug you with a CSS question instead of a Dash question, but cannot solve this. I have light and dark themes and set my coloring to create light and dark graphs. I want to offset my div colors just a bit from the default background, however when I define a class to do so, it is the same for both light and dark. Do you know the trick to define theme oriented classes in my css override file or any other way to pull this off?

Are you using the dbc.css stylesheet from the Theme Explorer?
It works by using named Bootstrap theme colors, so there is no need for a callback when the theme changes.

To make subtle changes like you are describing is a little trickier - it’s hard to come up with something that works for both (or all) themes. This post might be helpful. How to make ThemeSwitchAIO change the css class? - #4 by AnnMarieW

Another option is to create a new class something like “dbc-light” and “dbc-dark” to customize things for the light and dark themes. However this would have to be updated in a callback when the theme changes.
It might be possible to create it so that this class can go on the outer container of the app, so it only has to be added in one place.

@marketemp,

Can you give me a small MRE for this? I’ll look and see if there is anything you can use.

guessing MRE means example… I will when I have a chance but any code with a div and graph can be used from GitHub - AnnMarieW/dash-bootstrap-templates: A collection of 26 Plotly figure templates with a Bootstrap theme. Two theme switch components. Stylesheet to apply Bootstrap themes to Plotly Dash components.. Here are the basics. Using bg-info as my example, you can see here when you set the color of the body it creeps into the divs:

and if you set the classname within the divs, just the divs are colored which is what I want.

The only problem is getting the dark to be dark and the light to be light when it’s switched. By default the whole page switches dark|light, but if you set the div to a class, it stays the color of when it was first rendered, despite everything else changing.

Using Color · Bootstrap v5.0 as an example, I want my light to be bg-white and the divs gray-100 and for dark, slate is probably gray-800 so the divs would be gray-900. If there were any default className that somehow worked good enough for both I would use it.

The slate font is an ugly medium gray and I’d prefer font-white but but then that would make both sides white. I can’t get your example of: .theme .customclass to work and really think it should be that easy.

Thanks for any help figuring this one out. Getting back to getting my linking working within Dash Pages and will share my update when that’s done.

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

not doing the trick, I’d love to see it in a working script to see what I’m missing

This is what the css should look like:

.dark button {
        color: yellow;
}

The first one tells it what class to look for, then everything after narrows it down… if you have a ‘>’ it is the direct child. If no ‘>’ then it applies to all the elements underneath that one selector.

1 Like

sorry for the slow reply but this works great. My pages now look fantastic. Thanks @jinnyzor and @AnnMarieW for getting me on track with Dash Pages and ThemeSwitchAIO

2 Likes

Glad it’s working for you!

1 Like