Adding Theming Support to 3.X

,

Adoption of 3.x is at the door, OHRI is live example of it - born in the 3.X era.

We see many people interested in using 3.X and OHRI. This is really great and a common question when we do a show case, during the last conference (and hackathon) is how can I customisable 3.X is. Apart from just customising forms and components in general, implementors will are also interested to know: how do I make the new to match my country or organisation branding? Basically how can they change the current theme of OpenMRS 3.X

This question is also one of the questions that the @OHRI team have and we looked at the architecture and we found no easy way to do it. The good thing we found is that the logos can be changed but not the color pallet. We also know that @PIH did some work around this but it’s not abstract enough to be reused - but I have a strong feeling that we can borrow a lot of ideas from that work.

I know that this is part of the 3.X roadmap and some design work already exists so, am writing this post to bring back this conversation and see what you all think about this and how best we can tackle this.

CC: @grace @bistenes @jdick @burke @ssmusoke @pirupius

5 Likes

Thanks @eudson, I guess that theming in the context of 3.x would be intended to in fact be 1) re-colouring + 2) white labelling?

1 Like

Good one @eudson thank you.

This is something we’ve intended to implement for a while. There may even be some designs already. I have a clear idea of how it should be implemented:

esm-styleguide should have configuration variables like “primary color.” It should override the global CSS variable definitions based on the values provided.

@jdick

1 Like

Thanks so much @eudson for kicking this off!! Very grateful; I agree that making branding relatively easy will help with a sense of ownership for folks as they experiment with and adopt 3.x and OHRI. So a useful product move :slight_smile:

Re. Design Status: Complete. @bistenes the visual in Eudson’s message above is actually a design from Ciaran. He presented this along with the proposed approach for Theming back in Jan 2021 (1 yr ago). Design overview/presentation here: Pitch (You can see how Ciaran was trying to show the idea of how to correctly use a main theme color with two-tonedness, vs what colors need to stay consistent, like the alerts colors or the abnormal range warnings.)

image image

So I believe the Design stage is complete, unless Ciaran or Paul Adams feel otherwise (they’re not on talk but I’ve also cross-posted this in our UX slack channel with them so they can confirm when back from vacation).

Thank you @bistenes. I’m assuming you mean this one? GitHub - openmrs/openmrs-esm-refapp-styleguide

Is there a particular location under /src where you imagine this config living?

Update: Heard back from UX Leads Ciaran and Paul in the #ux-design-advisory channel this week. Here’s what Ciaran said:

yep we’re both still happy with that guidance on theming. We’re also looking now at how we can enable easy theming of components at the Design System level using Figma. This should make it easy for design teams in the future to quickly mock-up on-brand screens for their implementation of OpenMRS

So FWIW @bistenes and @eudson, the guidance in this presentation is still what they recommend we follow: Pitch

@grace thanks for the update. Hope we can get the ball rolling soon.

Agreed :slight_smile: @eudson @bistenes what do you think we need next - some more detailed modelling ideas perhaps?