Closed huong-li-nguyen closed 7 months ago
@antonymilne - this was initially supposed to be just a POC but shall we go ahead with this PR change now? Main advantages for me are:
dbc.components
(benefits us and users that add dbc.components
as custom components)This seems like a big step in the right direction to me and I think we should go ahead with it 👍
If we can now remove the "Adding a dash-bootstrap component" from the docs then let's do so. The "Dash Bootstrap Themes" warning is still relevant but could maybe be modified a bit now we know the direction of travel:
Please note that Vizro is not yet compatible with [Dash Bootstrap Themes](https://dash-bootstrap-components.opensource.faculty.ai/docs/themes/). Adding a Bootstrap stylesheet will not have any effect on your Vizro app.
I've modified to below, but I think the warning is still relevant. However, I've removed the other warning as functionality should be automatically shipped now via the default dbc.theme included, and styling is required for any custom component that gets added by the user 👍
Please note that Vizro is currently not compatible with [Dash Bootstrap Themes](https://dash-bootstrap-components.opensource.faculty.ai/docs/themes/).
Adding a Bootstrap stylesheet will have no visual effect on the [components](https://vizro.readthedocs.io/en/stable/pages/user_guides/components/) included in Vizro.
@AnnMarieW - would you mind taking a look at this PR? I would love to get your opinion on it!
This is by no means our final solution to our Bootstrap issue. We are still not compatible with dbc.themes
, but at least when someone tries to plug it in, it will have no visual effect on the currently existing components. So, I still kept the warning inside.
However, what did improve is that a dbc.theme
is automatically attached right now, so at least anyone creating a custom component on dbc, doesn't have to figure out the custom CSS required to make the component functional.
@huong-li-nguyen Nice work! This is awesome!
In dashboard.js
if you update this callback function, it will will use the correct light/dark color mode for the Boootstrap theme:
export function _update_dashboard_theme(checked) {
document.documentElement.setAttribute('data-bs-theme', checked ? 'light' : 'dark');
return checked ? "vizro_light" : "vizro_dark";
}
@huong-li-nguyen Nice work! This is awesome!
In
dashboard.js
if you update this callback function, it will will use the correct light/dark color mode for the Boootstrap theme:export function _update_dashboard_theme(checked) { document.documentElement.setAttribute('data-bs-theme', checked ? 'light' : 'dark'); return checked ? "vizro_light" : "vizro_dark"; }
Ahh, super smart! Thank you!!! 🚀 💯 Hope we can get a better long-term solution in place soon!
Description
This is also just a temporary POC fix to an issue we will solve differently long-term, changes included in this PR:
The current approach is not as different as our previous one, but has a few advantages:
Remains the same:
dbc.themes
still do not work properly in our code basis (in the sense of switching skins)dbc.component
to our code basis we still need to use custom CSS to apply our design (eventually we need to overwrite more properties now)Improvement to previous version:
dbc.theme
will have no visual effect now (with the currently existing components), as our CSS overwrites their CSSdbc.theme
by default has the advantage that all relevant CSS for the proper functioning of dbc components are correctly shipped, so when someone adds a dbc component as a custom component, it will work out of the box and they don't have to add CSS code to their assets folder anymore (same applies to us)Screenshot
When plugging in a dbc.theme before:
Now:
Notice
[x] I acknowledge and agree that, by checking this box and clicking "Submit Pull Request":