Entando APP - UI Theming

What is the proposed way to implement UI theming in Entando App ? Intention is to have a common look and feel for all the Micro Frotends deployed to an Entando App where it will get styled from the common theme files available across the portal. How this can be achieved , UX fragment can be utilized for this ?

Thanks
Anish A.Nair

Hey, Anish.

Good question. You have some freedom implementing that but one common pattern is to use a UX fragment, as you suggested, for a base theme, You can include that in your page templates so it’s applied to any of your MFEs. Typically you’d also see some inline styles that are lower level (via React withStyles or the like) and there’s always the balancing act of deciding how much to do at the component level versus up in the theme, trading off independence with consistent look-and-feel. I think every team finds their own compromises there.

Hope that helps,
Nathan

Hello @nathan.shaw,

Thanks for your response.

I have a question :

If we decide to use UX fragment , How can i bring my theme files which is resides inside a private artifact repository to Entando to build a UX fragment ?

Thanks,
Anish A.Nair

Hi, @anishanair.

Two steps. First, create a bundle containing your UX fragment. See https://dev.entando.org/v6.3/docs/ecr/ecr-bundle-details.html#fragment for an example of the format or https://github.com/entando/entando-process-driven-plugin/tree/dev_6.3/bundle_src/fragments for additional examples. That repo follows the pattern we’re talking about, e.g. https://github.com/entando/entando-process-driven-plugin/blob/dev_6.3/bundle_src/fragments/entando_pda_shared_css_js.ftl.

Second, push your bundle to your private repo and then configure Entando to securely pull from it. See
https://dev.entando.org/v6.3/tutorials/ecr/ecr-private-git-repo.html.

Cheers,
Nathan

1 Like