outsystems-dark-theme
Reactive icon

OutSystems Dark Theme 

Stable version 1.0.0 (Compatible with OutSystems 11)
Uploaded
 on 26 July 2022
 by 
5.0
 (13 ratings)
outsystems-dark-theme

OutSystems Dark Theme 

Documentation
1.0.0

To use the toggle theme simply you have to add the dependencies from the blank theme module into you reactive application and  then follow the steps below to configure it.


So at first place we have two modules one is a sample and other one is a theme module from which you have to take dependencies

Step 1: Take these dependencies shown in below image


Step 2: Click On the Module above the UI Flow and then choose the Dark_Light_Theme as a Default Theme.


Step 3: Now create a Client variable of Boolean  data type and default value as False, this will help us to stay on the selected them even after refreshing the page.


Step 4: As we have taken a dependencies of 2 client actions , now here we have to use them On a Menu block so that it can be use on all the screens.

OnReadyDarkTheme  Client action , you have to to use it on OnReady Event of menu block .


Step 4: Now create a toggle screen action, now drag and drop the  Toggle Dark Theme Client action in a flow, Once done take a assign below the action and set the values as shown below.


Step 5:  Now here comes the Toggle Switch that you will use to switch between dark and light theme

create If widget and pass the condition as seen in a picture below (this is the client action that we have created) both the branch will have icon as shown, then inclose the if in a link and set the onclick action as toggle screen action that you have created above.


You are done with Configuration You are Ready to use the Dark Theme

To Customize the look of your dark theme and if you want to change colours


You can customize it in a theme Module


That is all , 

For any issues, you can comment