Adding different themes in Mendix 9

1
Hi,    With Mendix 9, the platform does SCSS compilation for you, so the output is one single CSS file i.e. theme.compiled.css    How does that work if you need to support multiple labels (different login and styling) in a multitenant environment?    Cheers, Wilfried   Edit:  AFAIK you have two options. You can use either SASS- or CSS variables.    With SASS variables you have the same setup and config as the current Atlas design system. Each label is configured with custom variables, and you add the label as a class name to the body of the page. This option is using the same framework as Mendix, but the downside is that each label takes x KB to the theme.compiled.css file.   With CSS variables you create your own configuration once. Together with the Whitelabel helper widget, the proper styling is applied in runtime. The downside is that you need to create a whole new config, because CSS variables are handled differently, i.e. $color-primary-darker: mix($brand-primary, black, 60%);   I've been experimenting with CSS variables, and the solution currently supports color variants, background images, and fonts. This solution seems best fit for future use, but not sure of the limitations. Aynone? 
asked
5 answers
3

Made a video for you hopefully this gives some insights.

 

Maui9 | DevDiary | Pre-Calculated Whitelabeling

https://youtu.be/8Ju2M4A-uxc

answered
3

You might want to contact Jason Teunissen. He has created a Mx9 framework that supports this. Not yet in the marketplace but it might end up there someday. See also the slack channel:

https://mendixcommunity.slack.com/archives/CKH630S6T/p1659454189193329

 

Regards,

Ronald

 

answered
2

For the login-pages, you will have to create a separate login.html for each label and make the user’s of that label go to their respective login-page.

For the styling, I am assuming that the styling for the labels are mainly the same, but differ in colors, fonts and logos. So no big changes in the page’s layouts.

Basically you want to add a specific piece of styling to your app based on the label of the currentuser.

  1. So for starters you have to assign each user a ‘label-value’. You may use their company name or add a specific attribute ‘label’.
  2. For each label you create a class, containing their specific stylings;
  3. Add a javascript that adds currentuser’s label’s class to your page layout.

For step 3, download module SystemManagement and have a look at Snip_AddEnvironmentclassToBody. You can copy-paste-and-modify this to make the javascript add the class of currentuser’s label. No big javascript-skills needed. It is pretty straightforward.

answered
0

I would recommend setting up a css-class design system which looks at the root class on the page and assigns the specific styling to this page. biggest drawbag would be a big redo on the current design system as a lot of variables throughout the app have to be adjusted.

 

At MxBlue we’re near to release our Design System Accelerator which does exactly this. An Mutli-Tendant Design System based on css-variables.

answered
0

hi Wilfried.

 

Believe it or not, ALOT of clients have similar requests.

In order to facilitate this + a lot of other common requests we have created a methodology + design system to help bring Mendix into 2023

 

check out the video.

 

I hope to get this demo proj into the community by the end of the month for everyone to play around with.

 

https://youtu.be/VfDWCfLn128

 

answered