themes fail to fully apply when persistence in enabled for radio_props of ThemeChangerAIO

[mayushii21]

Example ThemeChangerAIO:

ThemeChangerAIO(
    aio_id="theme",
    radio_props={
        "options": [
            {
                "label": "Cyborg",
                "value": dbc.themes.CYBORG,
                "label_id": "theme-switch-label-dark",
            },
            {
                "label": "Vapor",
                "value": dbc.themes.VAPOR,
                "label_id": "theme-switch-label-dark",
            }
        ],
        "value": dbc.themes.CYBORG,
        "persistence": True,
    }
)

On the first load, the Cyborg theme is rendered, as expected. Switching to Vapor properly switches the theme to Vapor. Reloading the page, however, results in a theme somewhere in between Vapor and Cyborg, where the background is Vapor, but the text color, button borders, and other elements are Cyborg.

In version 1.1.2, things work properly (persisted themes get correctly applied after reload), but only in Chrome, not in Firefox. After version 1.1.2 the issue is present in Chrome as well.

Here is how things should look after reload (same as when freshly applying the theme):

Here is how they look after reloading with version 1.1.2 in Firefox, and in Chrome as well with newer versions:

[AnnMarieW]

Hi @mayushii21
Thanks for reporting... I'm looking into it 🤔

[mayushii21]

@AnnMarieW have you managed to reproduce the issue? I tested #44 and it completely broke themes for me.. With it, nothing at all applies, just a white background and broken page structure

[AnnMarieW]

Hi @mayushii21

I’m traveling for a few days and haven’t had a chance to look at the PR yet. In the meantime, it would be best to pin the version to 1.1.2. Hopefully we will have a solution soon.

[sdidier-dev]

Hi @mayushii21!
You should have tagged me 😁
I knew there was one thing to fix in my PR, now that should be fine if you want to test it 😉

[sdidier-dev]

btw, you can remove "label_id", it's not used anymore with this version👍

[AnnMarieW]

@sdidier-dev Thanks for the update! Is the removal of the label_id be a breaking change?

[sdidier-dev]

@AnnMarieW No, not a breaking change 😉
The style is applied using the style param of the component to apply it inline, instead of using CSS
https://github.com/AnnMarieW/dash-bootstrap-templates/pull/44/files#diff-aa772a859774952fa50ae1d32486545cec00116dd58132f1f25a27860fd00c56R113-R120

I know that's from dbc.RadioItems but it looked weird to me to use the id as a class to apply CSS (there is not something like label_class, only label_id).

So no need to set "label_id": "theme-switch-label-dark" it's handled internally using the dbc_dark_themes list + the new param custom_dark_themes to apply the dark label style to custom themes

If someone is already using "label_id": "theme-switch-label-dark" in his app and uses this new ThemeChangerAIO it will have no effect 👍

And we can remove the callback
https://github.com/AnnMarieW/dash-bootstrap-templates/pull/44/files#diff-aa772a859774952fa50ae1d32486545cec00116dd58132f1f25a27860fd00c56L159-L193