Custom css - referencing js

I am using ThemeSwitchAIO multipage app with FLATLY and DARKLY bootswatch themes. I want to make a small change to original theme css (change of secondary color) and load this customized css in my app.

If I reference the original theme from CDN link everything works great:
url_theme2 = “https://cdn.jsdelivr.net/npm/bootswatch@5.1.3/dist/darkly/bootstrap.min.css

If I reference the same css file from my assets folder (I also have the js folder with all the js files of dist 5.1.3 bootstrap.
url_theme2 = “assets/css/bootstrap.min.css”

I get and error:
(This error originated from the built-in JavaScript code that runs Dash apps. Click to see the full stack trace or open your browser’s console.)
/_dash-component-suites/dash/dash-renderer/build/dash_renderer.v2_6_0m1670189910.dev.js

TypeError: Cannot set properties of undefined (setting ‘href’)

I am pretty new to webapps so this might be basic question but why does referencing form CDN work without problems and I cannot load css locally? Where is js referenced from in case of external link and where in case of local reference? I tried to include external_scripts= and reference the js file in dash app but the error persist_

I have even published private npm package with has the same structure as original bootswatch npm package. I get an error with my package and no error with bootswatches.

Hello @davzup89,

This doesn’t work because of how the ThemeSwitch operates. It actually tries to pull the stylesheets from the app that matches the cdn pattern.

I have a thought on how to adjust this. But right now, you’ll have to just use the cdn versions.

Unless you want to just make your own.

Also, note that the asset folder is auto loaded, so the files would be auto applied.

Hey @jinnyzor! Thanks for your comment.

I actually created my own CDN but the error is still there. The last part follows the structure or original cdn (npm package)

I guess I cannot match the pattern that is required by ThemeSwitch even by creating own package?

Correct.

The cdn path is hard coded, it has to be what is listed in the dbc.themes.

But modifying the hardcoded link part in clientside_callback in aio_theme_switch.py could work?

Maybe a suggestion for next version of theme_switch to just use first part of link as hardcoded part, i.e. https://cdn.jsdelivr.net/ instead of “https://cdn.jsdelivr.net/npm/bootswatch@5”.

Yes, you can alter the hardcoded part in the theme switch. Just make it match your targeted stylesheets.

1 Like

Thanks. I hope future updates of AIOTheme_Switch will include faster solution to this :slight_smile:

1 Like

@davzup89

Try upgrading to `dash-bootstrap-templates==V1.0.8

In the latest release it’s possible to use local stylesheets from the assets folder. This is great for working off-line or if you have a custom stylesheet. It’s also possible to use any URL for hosted stylesheet rather than being limited to the themes available in the dash-bootstrap-components library.

Here is an example of a ThemeSwitchAIO using stylesheet files from the assets folder:

ThemeSwitchAIO(aio_id="theme", themes=["/assets/theme1.css", "/assets/theme2.css" ])

Find a full example in the dash-bootstrap-templates libarary

2 Likes