Multiple themes in mobile app

I'm trying to add multiple themes in my applications so its possible to switch between a light and dark mode.

I tried this by adding a css class to the body of the page using javascript but could not get it to work.

Has anyone else ever tried this and can someone show me an example of how you got it to work?

I've used this code in the past. Don't forget to set your CSS before and pass it to the javascript CSS parameter.

var stylesEl = document.getElementById("customization");

if (stylesEl === null) {
   
    var body = document.body;
    var style = document.createElement('style');
   
    style.type = 'text/css';
    style.id = "customization";
   
    stylesEl = style;
   
    body.appendChild(stylesEl);
}

if (stylesEl !== null) {
    stylesEl.innerHTML = $parameters.CSS;
}

Hi, Teun

I believe you could tinker with your app theme's stylesheet for this

Identify the main classes you want to change (like screen background and font colors, etc..)

You should have a datamodel ready to hold the info per session, so that a user that chooses the dark mode, for example, keeps their configuration.

Optionally you could have a BackOffice User Interface to allow further specifications.

Then, you would create the logic for loading the desired CSS and apply it onAppStart or explicitly when user triggers the change.

You should read this discussion on the topic. It has many good ideas you could adapt to your case

Let me know if this helps,

Sam

You will not be able to do that in mobile since you don't have session variables, the traditional download widget, because we don't want to go to the server all the time, etc.

The above example will work, but for traditional web.

Carlos Conde wrote:

You will not be able to do that in mobile since you don't have session variables, the traditional download widget, because we don't want to go to the server all the time, etc.

The above example will work, but for traditional web.

That is correct.

However, in mobile, you are able to use your local storage for the same purpose.