Created on 22 January 2022
icon_unfollowing
Login to follow
darkthemeswitch

DarkThemeSwitch

Version 1.0.1 (Compatible with OutSystems 11)
Uploaded on 22 January 2022 by 
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)
Category
Demos & samples, User interface
Support options
This asset is not supported by OutSystems. You may use the discussion forums to leave suggestions or obtain best-effort support from the community, including from  who created this asset.
Dependencies
DarkThemeSwitch has no dependencies.
Application Objects
DarkThemeSwitch has 0 AOs.
Team
Compatible with
Version 11
11.9.2 or higher
11.7.6 to 11.9.0
11.0.539 to 11.0.615
Database:
All
Asset consumers
No consumers yet.
Weekly downloads