Status Bar
Set default styling options and Light/Dark mode for the device status bar while your app is open. When the status bar is in Light mode it will display with black text, in Dark mode white text, in Auto mode it will follow the device Light/Dark mode setting. You may also customize and dynamically set the status bar visibility and style during runtime from your website using the Median Javascript Bridge.
Developer Demo
Display our demo page in your app to test during development https://median.dev/status-bar/
Set Status Bar at Runtime via Median JavaScript Bridge
The following parameters are available to customize the status bar appearance:
style
:'light'
,'dark'
or'auto'
. Sets the text and icon colors in the status bar. When the status bar is in Light mode it will display with black text, in Dark mode white text, in Auto mode it will follow the device Light/Dark mode setting.color
: RRBBGG or AARRBBGG format with hex values. Sets the status bar to a solid color. Use '00000000' for completely transparent.overlay
:true
orfalse
. If it's set to true, web content will extend underneath the status bar. And if it's set to false (default behavior), web content will start below the bottom of the status bar.blur
(iOS only):true
orfalse
. If it's set to true, a "blur" effect is applied in the status bar color. And if it's set to false (default behavior), no "blur" effect is applied and the status bar color remains the same as specified in thecolor
parameter.
Set Status Bar to Pre-Defined Parameters
To set a red status bar with 50% alpha, white icons, and have the web content extend underneath the status bar, run the following command:
โ๏ธMedian JavaScript Bridge
// Dynamically if (navigator.userAgent.indexOf('median') > -1) { median.statusbar.set({ 'style':'light', 'color':'80ff0000', 'overlay':true, 'blur': true // optional - iOS only }); } // Or on page load function median_library_ready(){ median.statusbar.set({ 'style':'light', 'color':'80ff0000', 'overlay':true, 'blur': true // optional - iOS only }); }
Automatically Match Status Bar Color to Web
To automatically detect the background color of your webpage and set the status bar color to correspond, run the following helper function:
Median JavaScript Bridge
function median_library_ready(){ median_match_statusbar_to_body_background_color(); }
Checking that
navigator.userAgent.indexOf('median') > -1
ensures your JavaScript code will only run while your app is showing within your app, and not in a standard browser.Using the function
median_library_ready()
ensures code will run once the Median JavaScript Bridge is active within your app.
Updated about 2 months ago