feat: change default style to be UIStatusBarStyleDefault and add dark…

… content style

README.md

@@ -55,7 +55,7 @@ Preferences
 
         <preference name="StatusBarBackgroundColor" value="#000000" />
 
-- __StatusBarStyle__ (status bar style, defaults to lightcontent). Set the status bar style (e.g. text color). Available options: `default`, `lightcontent`.
+- __StatusBarStyle__ (status bar style). Set the status bar style (e.g. text color). Available options: `default`, `lightcontent` and `darkcontent`.
 
         <preference name="StatusBarStyle" value="lightcontent" />
 
@@ -118,6 +118,7 @@ Although in the global scope, it is not available until after the `deviceready`
 - StatusBar.overlaysWebView
 - StatusBar.styleDefault
 - StatusBar.styleLightContent
+- StatusBar.styleDarkContent
 - StatusBar.backgroundColorByName
 - StatusBar.backgroundColorByHexString
 - StatusBar.hide
@@ -162,6 +163,7 @@ StatusBar.styleDefault
 =================
 
 Use the default statusbar (dark text, for light backgrounds).
+For iOS - Automatically chooses light or dark content based on the user interface style.
 
     StatusBar.styleDefault();
 
@@ -180,6 +182,20 @@ Use the lightContent statusbar (light text, for dark backgrounds).
     StatusBar.styleLightContent();
 
 
+Supported Platforms
+-------------------
+
+- iOS
+- Android 6+
+
+StatusBar.styleDarkContent
+=================
+
+Use the darkContent statusbar (dark text, for light backgrounds).
+
+    StatusBar.styleDarkContent();
+
+
 Supported Platforms
 -------------------
 

plugin.xml

@@ -62,7 +62,7 @@
                 <param name="onload" value="true" />
             </feature>
             <preference name="StatusBarOverlaysWebView" value="true" />
-            <preference name="StatusBarStyle" value="lightcontent" />
+            <preference name="StatusBarStyle" value="default" />
         </config-file>
 
         <header-file src="src/ios/CDVStatusBar.h" />

src/android/StatusBar.java

@@ -55,11 +55,13 @@ public class StatusBar extends CordovaPlugin {
     private static final String ACTION_OVERLAYS_WEB_VIEW = "overlaysWebView";
     private static final String ACTION_STYLE_DEFAULT = "styleDefault";
     private static final String ACTION_STYLE_LIGHT_CONTENT = "styleLightContent";
+    private static final String ACTION_STYLE_DARK_CONTENT = "styleDarkContent";
     private static final String ACTION_IS_OVERLAYS_WEB_VIEW = "isStatusBarOverlayingWebview";
     private static final String ACTION_GET_HEIGHT = "getStatusBarHeight";
 
     private static final String STYLE_DEFAULT = "default";
     private static final String STYLE_LIGHT_CONTENT = "lightcontent";
+    private static final String STYLE_DARK_CONTENT = "darkcontent";
 
     private AppCompatActivity activity;
     private Window window;
@@ -213,6 +215,10 @@ public boolean execute(final String action, final CordovaArgs args, final Callba
                 activity.runOnUiThread(() -> setStatusBarStyle(STYLE_LIGHT_CONTENT));
                 return true;
 
+            case ACTION_STYLE_DARK_CONTENT:
+                activity.runOnUiThread(() -> setStatusBarStyle(STYLE_DARK_CONTENT));
+                return true;
+
             case ACTION_IS_OVERLAYS_WEB_VIEW:
                 boolean isVisible = (window.getAttributes().flags & WindowManager.LayoutParams.FLAG_FULLSCREEN) == 0;
                 callbackContext.sendPluginResult(new PluginResult(PluginResult.Status.OK, doOverlay && isVisible));
@@ -279,7 +285,7 @@ private void setStatusBarStyle(final String style) {
             View decorView = window.getDecorView();
             WindowInsetsControllerCompat windowInsetsControllerCompat = WindowCompat.getInsetsController(window, decorView);
 
-            if (style.equals(STYLE_DEFAULT)) {
+            if (style.equals(STYLE_DEFAULT) || style.equals(STYLE_DARK_CONTENT)) {
                 windowInsetsControllerCompat.setAppearanceLightStatusBars(true);
             } else if (style.equals(STYLE_LIGHT_CONTENT)) {
                 windowInsetsControllerCompat.setAppearanceLightStatusBars(false);

src/browser/StatusBarProxy.js

@@ -35,6 +35,7 @@ module.exports = {
     isVisible: false,
     styleDefault: notSupported,
     styleLightContent: notSupported,
+    styleDarkContent: notSupported,
     overlaysWebView: notSupported,
     backgroundColorByName: notSupported,
     backgroundColorByHexString: notSupported,

src/ios/CDVStatusBar.h

@@ -35,6 +35,7 @@
 - (void) overlaysWebView:(CDVInvokedUrlCommand*)command;
 
 - (void) styleDefault:(CDVInvokedUrlCommand*)command;
+- (void) styleDarkContent:(CDVInvokedUrlCommand*)command;
 - (void) styleLightContent:(CDVInvokedUrlCommand*)command;
 
 - (void) backgroundColorByName:(CDVInvokedUrlCommand*)command;

src/ios/CDVStatusBar.m

@@ -309,30 +309,33 @@ - (void) setStyleForStatusBar:(UIStatusBarStyle)style
 
 - (void) setStatusBarStyle:(NSString*)statusBarStyle
 {
-    // default, lightContent
+    // default, lightContent or darkcontent
     NSString* lcStatusBarStyle = [statusBarStyle lowercaseString];
 
     if ([lcStatusBarStyle isEqualToString:@"default"]) {
         [self styleDefault:nil];
     } else if ([lcStatusBarStyle isEqualToString:@"lightcontent"]) {
         [self styleLightContent:nil];
+    } else if ([lcStatusBarStyle isEqualToString:@"darkcontent"]) {
+        [self styleDarkContent:nil];
     }
 }
 
 - (void) styleDefault:(CDVInvokedUrlCommand*)command
 {
-    if (@available(iOS 13.0, *)) {
-        [self setStyleForStatusBar:UIStatusBarStyleDarkContent];
-    } else {
-        [self setStyleForStatusBar:UIStatusBarStyleDefault];
-    }
+    [self setStyleForStatusBar:UIStatusBarStyleDefault];
 }
 
 - (void) styleLightContent:(CDVInvokedUrlCommand*)command
 {
     [self setStyleForStatusBar:UIStatusBarStyleLightContent];
 }
 
+- (void) styleDarkContent:(CDVInvokedUrlCommand*)command
+{
+    [self setStyleForStatusBar:UIStatusBarStyleDarkContent];
+}
+
 - (void) backgroundColorByName:(CDVInvokedUrlCommand*)command
 {
     id value = [command argumentAtIndex:0];

tests/tests.js

@@ -47,6 +47,9 @@ exports.defineAutoTests = function () {
             expect(window.StatusBar.styleDefault).toBeDefined();
             expect(typeof window.StatusBar.styleDefault).toBe('function');
 
+            expect(window.StatusBar.styleDarkContent).toBeDefined();
+            expect(typeof window.StatusBar.styleDarkContent).toBe('function');
+
             expect(window.StatusBar.styleLightContent).toBeDefined();
             expect(typeof window.StatusBar.styleLightContent).toBe('function');
 
@@ -84,6 +87,11 @@ exports.defineManualTests = function (contentEl, createActionButton) {
         StatusBar.styleDefault();
     }
 
+    function doColor4 () {
+        log('set style=darkcontent');
+        StatusBar.styleDarkContent();
+    }
+
     var showOverlay = true;
     function doOverlay () {
         showOverlay = !showOverlay;
@@ -100,9 +108,9 @@ exports.defineManualTests = function (contentEl, createActionButton) {
         'Expected result: Status bar will be visible' +
         '</p> <div id="action-hide"></div>' +
         'Expected result: Status bar will be hidden' +
-        '</p> <div id="action-color2"></div>' +
-        'Expected result: Status bar text will be a light (white) color' +
         '</p> <div id="action-color3"></div>' +
+        'Expected result: Status bar text will be a dark (black) color<br>for iOS - a device theme depending (black or white) color' +
+        '</p> <div id="action-color4"></div>' +
         'Expected result: Status bar text will be a dark (black) color' +
         '</p> <div id="action-overlays"></div>' +
         'Expected result:<br>Overlay true = status bar will lay on top of web view content<br>Overlay false = status bar will be separate from web view and will not cover content' +
@@ -150,6 +158,14 @@ exports.defineManualTests = function (contentEl, createActionButton) {
         'action-color3'
     );
 
+    createActionButton(
+        'Style=dark',
+        function () {
+            doColor4();
+        },
+        'action-color4'
+    );
+
     createActionButton(
         'Toggle Overlays',
         function () {

types/index.d.ts

@@ -25,10 +25,15 @@ interface StatusBar {
     overlaysWebView(isOverlay: boolean): void;
 
     /**
-    * Use the default statusbar (dark text, for light backgrounds).
+    * Use the darkContent statusbar (dark text, for light backgrounds and on iOS automatically chooses light or dark content based on the user interface style)
     */
     styleDefault(): void;
 
+    /**
+    * Use the darkContent statusbar (dark text, for light backgrounds).
+    */
+    styleDarkContent(): void;
+
     /**
     * Use the lightContent statusbar (light text, for dark backgrounds).
     */
@@ -68,4 +73,4 @@ interface StatusBar {
     isVisible: boolean;
 }
 
-declare var StatusBar: StatusBar;
+declare var StatusBar: StatusBar;

www/statusbar.js

@@ -53,7 +53,7 @@ var StatusBar = {
     },
 
     styleDefault: function () {
-        // dark text ( to be used on a light background )
+        // dark text ( to be used on a light background and on iOS automatically chooses light or dark content based on the user interface style)
         exec(null, null, 'StatusBar', 'styleDefault', []);
     },
 
@@ -62,6 +62,11 @@ var StatusBar = {
         exec(null, null, 'StatusBar', 'styleLightContent', []);
     },
 
+    styleDarkContent: function () {
+        // dark text ( to be used on a light background )
+        exec(null, null, 'StatusBar', 'styleDarkContent', []);
+    },
+
     backgroundColorByName: function (colorname) {
         return StatusBar.backgroundColorByHexString(namedColors[colorname]);
     },