darkthemeswitch
Reactive icon

DarkThemeSwitch

version 1.0.1 (Compatible with OutSystems 11)
Published on 22 Jan 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.

What’s new (1.0.1)

Demo page as public

Reviews (0)
Silk UI Framework Simulation Device
Resize the window to preview the page in target devices.
Open the settings to change the simulation device options.