📘
Set default styling options and Light/Dark mode for the system navigation bar while your app is open. When the navigation bar is in light mode it will display black icons or bars, while dark mode will show white icons. 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.

System navigation bar on Android is the 3 (or sometimes 2 buttons) at the bottom of the Android screen used to navigate. When using gesture navigation a bar appears which can be swiped to perform different navigation actions


3 Button Navigation	2 Button Navigation	Gesture Navigation

Configure System Nav Bar Color at runtime

The following parameters are available to customize the system nav 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.

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_system_navbar_to_body_background_color();
}

Set Status Bar to Pre-Defined Parameters

To set a red navigation bar with white icons, run the following command:

↔️Median JavaScript Bridge

// Dynamically
if (navigator.userAgent.indexOf('median') > -1) {
  median.systemNavBar.set({
    'style':'dark',
    'color':'80ff00'
  });
}

// Or on page load
function median_library_ready(){
  median.statusbar.set({
    'style':'dark',
    'color':'80ff00'
  });
}