Reactive OutSystemsUI Dark Mode

Stable Version 1.0.0 (OutSystems 11)
Published on 15 Jun by 

Reactive OutSystemsUI Dark Mode

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

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 this CSS adjustments in action!


Please share your feedback with us :)

Reviews (2)
28 Sep (3 weeks ago)
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 !!!
8 Sep
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.
Category
Themes, Templates
Support Options
This component is not supported by OutSystems. You may use the discussion forums to leave suggestions or obtain best-effort support from the community, including from José Pedro Proença who created this component.
Dependencies
Reactive OutSystemsUI Dark Mode has no dependencies.
Requirements
Platform:
11.0.606.0
Database:
All
Stack:
.NET
Component Consumers
No consumers yet.
Weekly Downloads