instant-dark-theme
Reactive icon

Reactive OutSystemsUI Dark Mode

Stable version 1.0.1 (Compatible with OutSystems 11)
Uploaded on 12 November 2021 by 
4.7
 (12 ratings)
instant-dark-theme

Reactive OutSystemsUI Dark Mode

Details
[TUTORIAL: https://youtu.be/-xIwJJQK0WY] 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

[TUTORIAL]

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 on 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:

html.dark-theme{

    /* 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 these CSS adjustments in action!


Please share your feedback with us :)

What’s new (1.0.1)
  • Fixed typo - Toogle vs. Toggle;
  • Improved transition between the light and dark themes, for a smoother experience. 
Reviews (4)
2021-11-03
in version 1.0.0
Works. If you get the error "manageDarkTheme is not defined", then this can be solved by referencing it in the Layout block, in the bottom of the block "Required scripts". There should "InstantDarkTheme_JS" be referenced.
2021-08-18
in version 1.0.0

manageDarkTheme is not defined this error is ocurred
2020-09-28
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 !!!