darkthemeswitch
Reactive icon

DarkThemeSwitch

version 1.0.1 (Compatible with OutSystems 11)
Uploaded
 on 22 January 2022
 by 
0.0
 (0 ratings)
darkthemeswitch

DarkThemeSwitch

Details
Toggle between dark and light themes
Read more

This asset gives you a component to easily toggle between a dark and a light theme. 

Also gives you client actions in case you may want to build a different UI Component that better fits your application.

The component achieves the theme switch effect by adding a "dark" class to the body element along side other OutSystems UI classes. So in order to implement a different theme you only need to add something along this lines in your application theme CSS file.


body.dark{

    color: var(--color-red);

}

body.dark .button-group-item:not(.button-group-selected-item){

    background-color: var(--color-neutral-7);

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

}


This component also saves the user preference in a Client variable in order to maintain the theme choice. If this variable is not set, the user preference from the operating system will be used. So on mac os, if the user has the light/dark theme change automatically during the day. You web app will behave in the same way.

Release notes (1.0.1)

Demo page as public

Reviews (0)
Team
Other assets in this category