huong-li-nguyen
commented
2 days ago Hello @mohammadaffaneh,
Thanks for reaching out and sharing your thoughts! 🙏 To customize the dashboard and chart skins, you currently have to overwrite specific CSS variables, place them in your assets folder, and customize the Plotly template. So you’re absolutely right—there isn’t a simple, centralized solution yet, but we’re working on it! A similar issue has also been raised here: https://github.com/mckinsey/vizro/issues/636, but let me give you more details on what we’re planning 📝 :
- Dash-Bootstrap Integration: We’re moving most of our components to use dash-bootstrap-components and are developing a new bootstrap theme. This will let users swap in another dash-bootstrap theme within Vizro or use the vizro-bootstrap theme in their own Dash apps. However, this change will only affect dash-bootstrap components. We'll need an extra layer to apply the bootstrap variables for other components, like those from dash-mantine. We plan to do this for all components within Vizro.
- Design Tokens and Modular Branding: For users looking to adjust specific variables like colors and typography without changing the entire theme, this will need to be done using Bootstrap CSS variables.
- The simplest solution would be to provide a CSS configuration file with commonly used variables (such as typography, primary color, and background colors) that users can add to their assets folder.
- Another potential idea is to develop a UI with an input form that generates this CSS file for you, similar to this: https://getbootstrap.com/docs/3.4/customize/
- Logo and Branding Elements: You can add a logo to a Vizro dashboard by placing an image (e.g., "logo.svg") in the assets folder, as detailed here: Add a Logo Image. This will automatically position the logo in the top left corner. You'll need to create a custom component for other branding elements like watermarks or footers. You can find an example for a footer here. However, if there's enough interest from users, we might add the other branding elements through configuration options as well. Out of curiosity, what other branding elements would you like to see?
- Real-World Use Case: I'd love to see this work too! But there's a bit of a challenge with Dash (and hence Vizro). Even if users can change the dashboard skin with a bootstrap theme, these changes don't automatically affect Plotly charts, which get their styling from the Plotly template. We'll need to create a translation layer to sync these changes from the dashboard to the charts, and it's something we're thinking about!
While we don't have a complete solution yet, rest assured that we're working on it! 💯 Would you be interested in testing a prototype once it's ready? It might take some time, but testing it in real-world scenarios would be helpful!
antonymilne
mohammadaffaneh
Which package?
vizro
What's the problem this feature will solve?
Currently, Vizro lacks built-in support for centralized brand identity management. This means users need to manually customize individual elements (like colors, typography, logos, etc.) across dashboards to align with their brand. This process is repetitive, error-prone, and inefficient for teams that need to maintain consistent branding across multiple dashboards.
I'm trying to ensure all dashboards adhere to a unified brand identity without manually applying the same styles repeatedly. I’ve explored custom CSS and other Dash-based styling solutions, but they lack the modularity and centralized control I need for seamless brand management across projects.
Describe the solution you'd like
Design Tokens: Support for standardized variables (colors, typography, spacing, etc.) that can be defined once and applied across all components and charts. Similar to Material-UI’s Theme Provider, this would enable dynamic theming for dashboards.
Logo and Branding Elements: A centralized way to include and update logos, watermarks, and other visual identity elements. This could mirror approaches like Storybook’s Brand Customization, where branding is applied globally.
Modular Branding Configuration: Allow teams to define brand identity settings in a single configuration file (e.g., JSON, YAML) and have them automatically applied to all dashboards. This is similar to how Tailwind CSS allows centralized theme customization.
Real-World Use Case: For example, if my company updates its brand colors, I’d like to update a single configuration file, and all my dashboards should reflect the new color scheme without further manual adjustments.
Code of Conduct