Reactive OutSystemsUI Dark Mode

Stable version 1.0.0 (Compatible with OutSystems 11)
Published on 15 June 2020 by 
 (9 ratings)

Reactive OutSystemsUI Dark Mode

Enable Dark Mode on your app in the blink of an eye! That's what you can do with this simple tool. By just calling a client action, you will instantly activate or deactivate dark theme, without even messing with your CSS variables.
Read more

The only effort you need is to add our JS script as required in your layout, and then you can call a client action to activate or deactivate a dark theme. You can call this action when the user clicks on a button, or store the user preference and call it after login! We store the value on a client variable so that it will persist in all pages of your application!

If you so wish, you can also adjust the colors to suit better your use case or specific, tailor-made web blocks. Just add a CSS definition for your elements with the class .dark-theme, for example:

.dark-theme .mywebblock .table{

    color: white;


You can also change all the values by adding this definition to your CSS:


    /* Color - Neutral */

    --color-neutral-0: #101213;

    --color-neutral-1: #272B30;

    --color-neutral-2: #4F575E;

    --color-neutral-3: #6A7178;

    --color-neutral-4: #ADB5BD;

    --color-neutral-5: #CED4DA;

    --color-neutral-6: #DEE2E6;

    --color-neutral-7: #E9ECEF;

    --color-neutral-8: #F1F3F5;

    --color-neutral-9: #F8F9FA;

    --color-neutral-10: #FFFFFF;

    --color-background-body: #121212;

    --header-color: #424242;

    color: var(--color-neutral-9);


Please check the Demo to see some of this CSS adjustments in action!

Please share your feedback with us :)

What’s new (1.0.0)
Reviews (3)
18 Aug
in version 1.0.0

manageDarkTheme is not defined this error is ocurred
in version 1.0.0
after receiving quick and efficient feedback from the developer i managed to use the app thanks for sharing this dark theme script is awesome !!!
in version 1.0.0
Pretty intuitive. Although, it would be helpful if there was more specific instructions as to where one should insert the script.