Custom theme support

[yetudada]

Which package?

Vizro

What's the problem this feature will solve?

I would like to suggest the addition of custom theme support in Vizro, akin to the functionality available in Streamlit. This feature would be a valuable enhancement, enabling users to align their applications with specific branding guidelines, which is especially crucial in corporate settings. Apparently, users can upload logos and they can hack away at Vizro to do this. This features suggests that there’s an easy way for users to make certain customisations.

Describe the solution you'd like

I’m not a user and haven’t run into this problem except for seeing non-branded demos.

I think it should support:

• Customisable colours: users should have the ability to easily define key color variables, including:
  • Primary colour for interactive elements.
  • Background colour or the main content area.
  • Secondary background colour for sidebars and widgets.
  • Text colour to ensure readability and consistency.
• Font customisation: allow users to specify custom fonts, supporting common font types (e.g., serif, sans-serif, monospace). Additionally, consider the capability for users to upload custom font files, enabling the use of proprietary typefaces.
• Logo integration: provide an option for users to upload and embed logos directly into the application, facilitating cohesive branding.
• A theme configuration interface: themes could be defined and modified using a configuration file (e.g., config.toml), with instant updates reflected in the app’s appearance.
• Internally hosted corporate themes: this is for us, it would be great to have our branded theme available internally on Brix.

Code of Conduct

• [X] I agree to follow the Code of Conduct.

[maxschulz-COL]

Hey @yetudada ,

thanks for your reach out! Good to see you posting on the issues :).

What you are describing can maybe be split into two ideas:

• enabling the use of existing (well-known) themes, e.g. Dash Bootstrap Theme, and the current Vizro styling to be such a theme - this would allow immediate skinning/styling of an entire Vizro app with one line
• Facilitated management of some key variables in the case no existing theme would fit, a corporation has very specific requirements or a single thing should be changed

The former is on our roadmap, and our ultimate goal. We would like the Vizro styling to be a bootstrap theme (it already is) that can be used not just in Vizro, but also any other Dash app. Likewise, other themes should be possible to be used in Vizro.

For the latter, I think that is an interesting idea. Maybe to elaborate: this is already possible via CSS for colors and fonts. A logo can also be added simply without any additional requirements. Is that too "hacky"? On first glance I like the idea of how streamlit does it. We would need to discuss how easily we can make an alternative way to CSS possible.

@Joseph-Perkins Any additional remarks/ideas on this?

[antonymilne]

A quick note that the theme configuration @yetudada describes here is quite reminiscent of theming in Homer.