Brand identity management

[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

• I agree to follow the Code of Conduct.

[huong-li-nguyen]

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: #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]

Just to add to what @huong-li-nguyen said: in terms of maintaining consistent branding across multiple dashboards, this is something that I think might actually become easier quite soon with the release of Dash 3 (not sure exactly when it's coming out but it's meant to be soon). It won't immediately change the answers to questions about how to theme a single dashboard, but it could well provide better mechanisms for applying the same theme consistently across many dashboards. Since it's not released yet, it remains to be seen exactly how this will work inside Vizro but I think that for people with multiple Dash or Vizro apps hopefully it could simplify things quite a bit.

Thank you for making this issue, it's really interesting and very clearly written! 🙏

[mohammadaffaneh]

Thank you both for your thoughtful and comprehensive responses! I truly appreciate the time and effort you're investing in improving Vizro.

---

@huong-li-nguyen

1. Out of curiosity, what other branding elements would you like to see?

Answer:

In addition to logos and watermarks, it would be beneficial to have centralized control over:

• Typography: Ability to define and apply consistent fonts across all components and dashboards.
• Iconography: Standardized icons that align with the brand identity.
• Spacing and Layout: Consistent spacing, margins, and layout guidelines to ensure uniformity.
• Interactive Elements: Standard styles for buttons, links, and other interactive components.
• Dark/Light Themes: Support for multiple themes that can be toggled or set based on user preference or brand guidelines.

These elements would help maintain a cohesive look and feel across all dashboards, enhancing the overall user experience.

---

@antonymilne

Thank you for the update regarding Dash 3 and its potential impact on theming across multiple dashboards. This sounds promising and could significantly simplify maintaining consistent branding across Vizro apps.

Interest in Contributing:

I will keep you informed about any opportunities to assist in this area, as I am keen to help you guys, but unfortunately cannot commit to anything with the current situation.

---

Thank you once again for your dedication and for considering these enhancements.