Hello, in OutSystems is it possible to create variables for the user to change between various themes created?

Exemple: Dark Theme or Light Theme.

The platform does not directly support this sort of functionality.

I have attempted this in the passed by dynamically including a separate CSS file which overrides all of the defined styles.  It does this by adding a class to body, eg class="DarkTheme" and each style has .DarkTheme added to the start of each definition.

It is not very maintainable, as you can imagine, because you have to keep the overriding theme up to date with each change to the main theme.

That was in Traditional Web Apps using Silk UI.  I do not really recommend it though.

A better approach, if it works for you is to do a limited change to the layout in the header and footer.

I hope this helps.  Let me know if you would like more detail.

Kind regards,

Stuart

Solution

Hi Luciano,

You can do this using simple CSS and one small js script. Here is one example of doing this with css and js which you can implement in OutSystems.

https://codepen.io/ananyaneogi/pen/zXZyMP

Solution

Nikhil Gaur wrote:

Hi Luciano,

You can do this using simple CSS and one small js script. Here is one example of doing this with css and js which you can implement in OutSystems.

https://codepen.io/ananyaneogi/pen/zXZyMP

Hi Nikhil,

I have seen your example.

But if you use a theme in outsystems, all the widgets style properties are derived from the selected theme. So if you add a new widget, it again derives the CSS properties from theme. So when I checked the default CSS which comes with the theme, there are a lot of properties for the widgets. So do I need to write all the properties again. or? 

Thanks in advance.

Regards,

Saiteja


Hi Sai,

No, there is no need to write all properties again, You just have to define two set of css variables for your colors in your theme (as described in the css on above example link).

It will look something like this in your theme style sheet:

And now because your theme uses these color variables so upon switching to dark mode (using js given on the link) your theme will change to dark mode without defining all the styles again.

Please note that above color are just for sample and might not be as per proper dark theme so use your own colors.

Nikhil Gaur wrote:

Hi Sai,

No, there is no need to write all properties again, You just have to define two set of css variables for your colors in your theme (as described in the css on above example link).

It will look something like this in your theme style sheet:

And now because your theme uses these color variables so upon switching to dark mode (using js given on the link) your theme will change to dark mode without defining all the styles again.

Please note that above color are just for sample and might not be as per proper dark theme so use your own colors.

Hi Nikhil,

Appreciate the quick response.

In your message, you have mentioned 'because your theme uses these color variables', I have a question here, 

Please find the below screenshot. A shot from Dublin theme's UI window. Lets say I want to toggle the highlighted attributes. So as present in the above example link I will go ahead and copy this whole css to the theme window and change the attributes values to ''  var(--bg-color); " (say i defined --bgcolor ). 

Is my understanding right or is there any thing that I am missing.

Instead of the highlighted properties, I want to toggle between colors for  rest of the properties also(present in screen shot) like 'border-top-color','color','border-color','border-left-color' etc.So, defining all these values in :root and again separately for a dark theme and using var(<defined property name>) is the one which you are telling ? 

Another question is, Is there a way that i can attach a CSS file instead of the default CSS provided by the theme. Because if I can actually attach that then I can create two CSS files, one for each light and dark and call either when I want.

Thanks in Advance.

Regards,

Saiteja