Dark & Light mode in your OutSystems apps
1. Add DarkTheme.css and NoTransitions.css CSS file in the Resouces folder.
2. Add InstantDarkTheme_JS javascript file in the scripts folder .
3.Update the path of DarkTheme.css in InstantDarkTheme_JS file on the 3 lines. Same as your Runtime Path.
4.Update the path of NoTransitions.css in InstantDarkTheme_JS file on the 33 lines. Same as your Runtime Path.
5.Create a Client Action called IsDarkThemeActive of type Boolean and set the default value as False.
6. Create a Client Action called ToggleDarkTheme
a. Drag and Drop an Assign Widget.
Add Variable - Client.IsDarkThemeActive , Value – not Client.IsDarkThemeActive
b. Drag and Drop an Javascript Widget.
Add Script- var body = document.getElementsByTagName("body")[0];
body.classList.add("notransitions");
body.offsetHeight; // Trigger a reflow, flushing the CSS changes
c. Drag and Drop an Javascript Widget.
Add Script- manageDarkTheme($parameters.isDarkThemeActive);
Create Input Parameter – isDarkThemeActive
Pass the value of isDarkThemeActive - Client.IsDarkThemeActive
d. Drag and Drop an Javascript Widget.
body.classList.remove('notransitions'); // Re-enable transitions
Select a Layout that you want to use Like LayoutSideMenu, LayoutTopMenu or any other. Add InstantDarkTheme_JS in the Required Script Property.
Expend Layout like LayoutSideMenu, Then create a client action called ModeonClick on the layout and Add ToggleDarkTheme Client Action in the actionflow.
Open Layout like LayoutSideMenu, Then open Widget tree and add an If widget where you want to add the Icons for Dark and Light Mode . For example in Header.
If Condition - Client.IsDarkThemeActive
True Branch - Add Moon ICon or Image and Set OnClick Event and add Handler as ModeOnClick Client action.
False Branch - Add Sun ICon or Image and Set OnClick Event and add Handler as ModeOnClick Client action.
Publish The module and try the Dark and Light Mode