How to Support iOS Dark Mode for Voltmx IRIS App

[madhukar.pallam]

From iOS 13 onwards apple provided two display modes like : Light mode and dark mode.

To enable Voltmx Iris apps with user setting:

Documentation:
https://opensource.hcltechsw.com/volt-mx-docs/docs/documentation/Iris/iris_api_dev_guide/content/voltmx.application_functions.html#example_24

note: check example 3 snippet.

The following are required steps in your app.

1. Use Themes tab and Create New Theme or Duplicate Current Theme for your light and dark themes.

   

2. Select the default theme and apply the required skin changes across the app.

3. Use the voltmx.application.registerOnSettingsChangeCallback API to listen to system theme changes and set app theme using voltmx.theme.setCurrentTheme API
   Add the following snippet in Module file:

 function applicationAppearanceStyleCallback(params) {
  function onThemeCallback() {
  }
  switch (params.setting) {
  case "applicationAppearanceStyle":
      switch (params.applicationAppearanceStyle) {
          case voltmx.application.APPEARANCESTYLE_DARK:
          voltmx.theme.setCurrentTheme("darkTheme",
          onThemeCallback, onThemeCallback);
          break;
          case voltmx.application.APPEARANCESTYLE_LIGHT:
          voltmx.theme.setCurrentTheme("lightTheme",
          onThemeCallback, onThemeCallback);
          break;
          case voltmx.application.APPEARANCESTYLE_UNKNOWN:
          break;
      }
      break;
  }
 } voltmx.application.registerOnSettingsChangeCallback(["applicationAppearanceStyle"], applicationAppearanceStyleCallback);

The following gif shows sample app behaviour: