Fix persistence and add support of custom themes of theme changer

[sdidier-dev]

Hi there! 😁
Here is a PR modifying the ThemeChangerAIO component inspired by the update of the ThemeSwitchAIO.

Change log:

• Fix persistence (Fix themes fail to fully apply when persistence in enabled for radio_props of ThemeChangerAIO #43)
• Add custom theme support (Fix Update ThemeChangerAIO for custom css #28)
• Add support for custom server side and client side assets folder (Dash params assets_folder and assets_url_path)

[AnnMarieW]

Thanks for the update 🙂
Here is what I have so far... still reviewing 🔎

[AnnMarieW]

This requires at least python 3.9. We should still support 3.8 until Dash drops that support. Probably need to update the ThemeSwitch component too.

[sdidier-dev]

Last commit adds backward compatibility with python 3.8.0

[AnnMarieW]

This is a much better way to do it, but dbc.RadioItems only supported components as props for labels in dbc v1.4.0 released Feb 23. It will break for anyone using an older version of dbc

[sdidier-dev]

Last commit adds backward compatibility with dbc 1.3.1
Rollback using #theme-switch-label/#theme-switch-label-dark CSS styles

But still no need to apply label_id when user provide a custom radio_props['options'], like

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

Its handled internally using the list dark_themes = (dbc_dark_themes + custom_dark_themes)

But if someone still applies label_id it won't be overridden, for instance it's possible to set "label_id": "" to remove the styling.

[AnnMarieW]

This will be a breaking change too - The value is now the link rather than the name of the of the theme. But is this required in order to support custom stylesheets?

[sdidier-dev]

Yes it was a breaking change, actually it was the opposite, it used the url instead of the name.
I preferred to use the name, but rollback in the previous commit to not have a breaking change... but forget to also rollback this description 🙏

Corrected in the last commit.

[sdidier-dev]

New commit changelog:

• Python 3.8.0 compatibility, modifying typing and dict concat for ThemeChangerAIO and ThemeSwitchAIO (fix The most recent version (1.2.4) started to cause an import error  #41)
• dbc 1.3.1 compatibility, rolling back to use #theme-switch-label/#theme-switch-label-dark to apply label styling
• remove clientsideCallbacks.js, the JavaScript functions are directly used in Python code in the clientside_callback
  for ThemeChangerAIO and ThemeSwitchAIO (fix AIO external_url pointing to a local folder troubles #42)

[mayushii21]

@sdidier-dev this does seem to properly apply persistent themes, but on the first theme load there's a split second flashbang (everything's white) while a theme is loading. So if you load the page, and then switch from theme_a to theme_b, everything will flash white for a second, then if you switch back, it'll be normal (I'm assuming this has to do with caching the themes CSS by the browser). This was not an issue in version 1.1.2

[sdidier-dev]

Hi @mayushii21! can you try with this last commit if that's better?

[mayushii21]

@sdidier-dev while your solution did help, it still flashed on initial load, and relying on delays isn't best practice. I don't quite understand the logic flow of everything you were doing there, so I forked your fork and fiddled around. I created a pull request to your fork with a solution that seems to work well for me, relying on onload of the new stylesheet instead of delaying to set the href attribute. Please take a look. Not having to wait an entire half second also makes it feel a lot snappier - better user experience

[sdidier-dev]

Thanks @mayushii21 for the improvement!