This page documents the status bar.
Hiding the status bar
There are multiple ways to do this.
Method 1
Use the manifest.webapp file to hide the status bar throughout the entire app. Add this to your manifest:
"fullscreen": "true"This will launch the app in fullscreen mode.
Icons only
This will fullscreen the app, while keeping the status bar icons. This can be used to add your own status bar background.
"chrome": {
"statusbar":"overlap"
}Note: there is a bug on some devices, where calling window.open() in an app with an overlapped status bar will not show the controls for the browser.
Method 2
Simply call document.element.requestFullscreen(), where element is the element you want to fullscreen.
This is good for temporarily hiding the status bar, but keep in mind that your app will be un-fullscreened when the device goes to sleep and the user has lockscreen enabled, or the device is flipped closed.
Status Bar Color
This only applies if you application is using default status bar behaviour.
You can change the color of the status bar by adding this to your HTML file:
<meta name="theme-color" content="#000000" />
There is no information on how to change the color of the icons in the status bar at this time.
Appearance Between Devices
On almost every KaiOS phone, the status bar looks the same. However there are some exceptions.
Normal
Currently, the usual status bar looks like this.
The number of notifications and the IME status is shown on the left side, and the time and other device information is shown on the right.
US Alcatel Phones
These phones place the carrier name on the left side of the status bar, instead of the usual number of notifications. Notifications are still shown in the form of individual applications icons, like Android. However this is only limited to specific apps.
Doro
The status bar icons are bigger.