Application have 3 Options for choosing theme.1.Dark theme2.Light theme3.Device themeIf I select device theme option , native mobile theme should be apply to the Application .How can I achieve this, anyone help me for this .Thanks in advance
Hi Venkatesaiya,
You can refer to this article
https://success.outsystems.com/documentation/11/developing_an_application/design_ui/look_and_feel/themes/
or you can achieve this by the forge component also
https://www.outsystems.com/forge/component-overview/14599/dark-light-mode-demo-o11
in this component we have the option of dark and light but for mobile theme you need extra JS code and add the functionality.
Hope this helps
Thanks
Hi Neha, Thanks for you time.I achieved the theme by selecting inside the Application . I need to apply the device theme, For example, Application theme in Light but device theme is dark. If I select the device theme option, the device theme (dark) will apply to the application
You can do this by javascript
function calculateSettingAsThemeString({ localStorageTheme, systemSettingDark }) {
if (localStorageTheme !== null) {
return localStorageTheme;
}
if (systemSettingDark.matches) {
return "dark";
return "light";
const localStorageTheme = localStorage.getItem("theme");
const systemSettingDark = window.matchMedia("(prefers-color-scheme: dark)");
let currentThemeSetting = calculateSettingAsThemeString({ localStorageTheme, systemSettingDark });
More you can refer to this