Dynamic style change

0
I am a beginner in mendix and i have to make a festivalmanagement app in mendix studio pro 11.8 for school. But i now have to make a drop down menu with the option to select different website styles. I now have added these styles to the main.scss file. But with the change of a button i want it to change the color of the website incuding the menu's. I didn't succeed so far and gemini didn't help me further. My question here is. Is this even possible or am i dreaming to big? And if this is possible how can i make this so that it works?
asked
2 answers
1

Hi Jochem,


You can use JavaScript Actions for this. Here is a possible solution:

  • Let your button call a nanoflow: e.g. ACT_Style_SwitchToVersion1
  • Create a custom JavaScript Action "SwitchAppStyle".
  • Create one parameter 'styleClass' in this JavaScript Action. This will be the class you want to add that contains your styling.
  • Switch to the Code tab at the top and put the following code between the USER CODE:
// BEGIN USER CODE
	
document.body.className = styleClass;
	
// END USER CODE
  • Call this JavaScript Action in your nanoflow and set the styleClass parameter to your custom class.


This should be a simple solution to your question.


Hope this helps!

answered
0

Hi

In the latest versions of mendix specially after 11th it's a bit different.

So, If you go and look in the app module > styling > web

you will see two files

  1. theme-dark.scss
  2. theme-neutral.scss




The theme-dark.scss conains root variables for dark theme for example
:root.theme-dark {

--color-base: rgb(30, 30, 30);

--color-contrast: #ffffff;

}

step 1 - Just need to update the variable values inside this file as per your requirement.

step 2 - Just need to trigger a nanoflow which calls a JS_action which will do add the class to the document like


document.documentElement.classList.add("theme-dark");



answered