Dynamic UI API
Change native UI elements like the status bar color dynamically from your web app on Android.
WebViewGold allows you to dynamically customise the UI elements in your web app. These elements may consist of the status bar, bottom bar (iOS), navigation bar (Android) and pull to refresh (iOS). WebViewGold includes the following commands to dynamically customise these elements:
- statusbarcolor://
- The MASTER COMMAND to change the color of the status bar and any other relevant UI features automatically, such as the status bar text color, the bottom bar color (iOS), navigation bar color (Android), etc.
- statusbartextcolor://
- Allows you to manually change the text color of the status bar (iOS and Android).
- bottombarcolor://
- If a bottom bar (iOS) or navigation bar (Android) UI element exists, allows you to manually change its color.
- navbartextcolor://
- Allows you to manually change the text color of the navigation bar on Android. Request will be ignored on iOS (the bottom bar on iOS does not have text).
- hidebars://
- Allows you to hide the background of the status and navigation bar.
Changing the color of the Status Bar (and other UI elements automatically):
This feature supports a color input in the following format:
- RGB = {red, green, blue}
Use JavaScript to this kind of URL to change the color of the status bar:
<script> // Example: red window.location.href = "statusbarcolor://255,0,0"; </script>When you change the status bar color, the status bar text will automatically change to a suitable color (white or black) depending on how dark the color is.
Optional UI features like Pull To Refresh (iOS), the Bottom Bar (iOS) and the Navigation Bar (Android) will also have their colors automatically adjusted.
Changing the color of the Status Bar text:
If you would like to manually choose the color of the status bar text, you can do so using this option.
This feature supports a text input for the following options:
- "white"
- "black"
<script> // Example: white text window.location.href = "statusbartextcolor://white"; // Example: black text window.location.href = "statusbartextcolor://black"; </script>
Changing the color of the Navigation Bar:
This feature supports a color input in the following format:
- RGB = {red, green, blue}
Use JavaScript to this kind of URL to change the color of the navigation bar:
<script> // Example: red window.location.href = "bottombarcolor://255,0,0"; </script>
Changing the color of the Navigation Bar text:
If you would like to manually choose the color of the navigation bar text, you can do so using this option. Please note that this request will be ignored on iOS.
This feature supports a text input for the following options:
- "white"
- "black"
<script> // Example: white text window.location.href = "navbartextcolor://white"; // Example: black text window.location.href = "navbartextcolor://black"; </script>
Hiding the status and bottom bars
The hidebars functionality can either be on or off.
Note, the status bar text, such as the time and battery percentage do not remain visibile to the user. However, these can be brought back to view with a user swipe from the top.
Use JavaScript to change the visibility status of the status and navigation bar:
<script> // Example: hide the bars from view window.location.href = "hidebars://on"; // Example: redisplay the bars after being hidden window.location.href = "hidebars://off"; </script>
Detect Dark Mode (isDarkMode JavaScript variable)
To adapt your dynamic UI colors to the user's system theme, WebViewGold automatically injects the JavaScript variable isDarkMode (true or false) into every page once it has finished loading. Example:
<script>
if (typeof isDarkMode !== "undefined" && isDarkMode) {
// Dark mode: e.g., set a dark status bar
window.location.href = "statusbarcolor://0,0,0";
window.location.href = "statusbartextcolor://white";
} else {
// Light mode
window.location.href = "statusbarcolor://255,255,255";
window.location.href = "statusbartextcolor://black";
}
</script>
Note: Alternatively, you can use the standard CSS media query prefers-color-scheme in your web app. The injected isDarkMode variable is handy when you want to trigger the WebViewGold UI APIs above from JavaScript.