Allow web screens to switch to another Theme

On our radar

Allow web screens to switch to a different Theme.

Created on 16 Feb
Comments (4)

Hey Luis,

When do you need this? Do you usually have different screens with different themes inside a single ui flow?

You can already override the theme being used at flow level.


There was already two situations that we needed to use the same screen(s) with two or more different themes.

If it's just one screen we can use several webflows (each one with a different theme) and the pages presenting the same content (on webblocks) But in my opinion that doesn't seems a good solution.

According with some rules we may want to present the page to the user on a different theme (to make it more clear to the him where he is).

And yes we can override the theme at flow level but that's not easy to do in runtime, right? It's kinda static for all the screens inside the webflow. 

In case we have a flow with several screens and if we want to present all them in a different way how can we achieve that?

Hi Luis,

Oh you want to dynamically change the styles!

I wouldn't call it two *themes* and I wouldn't create two OutSystems themes to achieve that. What you can do is to have a single theme that styles elements based on css classes in an outer layout container (or even the html body). This way, you can simply write your css and prefix the styles of one specific theme with the css class you want. For example:

Now you just have to switch the css class of the layout element to "red" or "blue" to adapt your screen, and you only have to maintain one css.

Hope this helps ;)

Currently we have several themes. Each of theme applies different colors to all the elements of a page.

I want to switch between them dynamically.