Changing the status bar color in an ODC Studio Mobile app to match the screen color involves updating the Extensibility Configurations with the required JSON code or dynamically modifying the status bar properties using JavaScript.

1. Using Extensibility Configurations: In the Mobile UI Framework for ODC (OutSystems Developer Cloud), you can set the status bar's background color to match your screen color by defining it in the "Extensibility Configurations" property for your app. Navigate to the "Edit App Properties" interface in your ODC Studio (similar to the configuration window shown in ), and include the following JSON configuration:

   {
     "appConfigurations": {
       "android": {
         "systembars": {
           "style": "light",
           "backgroundColor": "#yourScreenColorHex"
         }
       }
     }
   }
   

   Replace "#yourScreenColorHex" with the hexadecimal color code of your screen background (e.g., "#FFFFFF" for white). This setting will apply globally or to particular screens if scoped correctly Customize the application status bar.

2. Dynamic Change Using JavaScript: If the screen color varies dynamically, you can use JavaScript and leverage the Cordova StatusBar plugin (available in ODC). In the OnInitialize event of your screen, apply the following JavaScript:

   if (window.StatusBar) {
       const screenColor = '#yourScreenColorHex'; // Replace with dynamically calculated screen color
       window.StatusBar.backgroundColorByName(screenColor);
       window.StatusBar.styleDefault(); // Adjust based on the text/icon visibility
   } else {
       console.log("StatusBar plugin is not available");
   }
   

   Ensure the backgroundColorByName() method's parameter matches the screen hexadecimal color dynamically rendered during runtime How to change the value of extensibility configuration by javascript?.

3. Additional Notes:

   • If your app relies on styling changes based on light or dark screen backgrounds, you can toggle between styleDefault() (for dark backgrounds) or styleLightContent() (for light backgrounds) dynamically How to set the color font on status bar dynamically change based on the background?.
   • Both solutions may require a rebuild of the mobile app if you're updating the extensibility configuration, while JavaScript solutions apply immediately during runtime.

By adopting the above methods, you can ensure your status bar color in an ODC Studio Mobile app seamlessly matches the underlying screen colors.