Add new styleDarkContent with possibility of selection of default style that is very important for iOS (#164)

README.md

@@ -57,7 +57,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`. `blacktranslucent` and `blackopaque` are also available, but __deprecated__, will be removed in next major release, use `lightcontent` instead.
+- __StatusBarStyle__ (status bar style, defaults to lightcontent). Set the status bar style (e.g. text color). Available options: `default`, `lightcontent`, `darkcontent`. `blacktranslucent` and `blackopaque` are also available, but __deprecated__, will be removed in next major release, use `lightcontent` instead.
 
         <preference name="StatusBarStyle" value="lightcontent" />
 
@@ -120,6 +120,7 @@ Although in the global scope, it is not available until after the `deviceready`
 - StatusBar.overlaysWebView
 - StatusBar.styleDefault
 - StatusBar.styleLightContent
+- StatusBar.styleDarkContent
 - StatusBar.styleBlackTranslucent
 - StatusBar.styleBlackOpaque
 - StatusBar.backgroundColorByName
@@ -166,6 +167,7 @@ StatusBar.styleDefault
 =================
 
 Use the default statusbar (dark text, for light backgrounds).
+For iOS - dark or light text depending on a device current theme.
 
     StatusBar.styleDefault();
 
@@ -185,6 +187,21 @@ Use the lightContent statusbar (light text, for dark backgrounds).
     StatusBar.styleLightContent();
 
 
+Supported Platforms
+-------------------
+
+- iOS
+- Android 6+
+- Windows
+
+StatusBar.styleDarkContent
+=================
+
+Use the darkContent statusbar (dark text, for light backgrounds).
+
+    StatusBar.styleDarkContent();
+
+
 Supported Platforms
 -------------------
 

src/android/StatusBar.java

@@ -187,6 +187,16 @@ public void run() {
             return true;
         }
 
+        if ("styleDarkContent".equals(action)) {
+            this.cordova.getActivity().runOnUiThread(new Runnable() {
+                @Override
+                public void run() {
+                    setStatusBarStyle("darkcontent");
+                }
+            });
+            return true;
+        }
+
         if ("styleBlackTranslucent".equals(action)) {
             this.cordova.getActivity().runOnUiThread(new Runnable() {
                 @Override
@@ -255,6 +265,7 @@ private void setStatusBarStyle(final String style) {
 
                 String[] darkContentStyles = {
                     "default",
+                    "darkcontent"
                 };
 
                 String[] lightContentStyles = {
@@ -273,7 +284,7 @@ private void setStatusBarStyle(final String style) {
                     return;
                 }
 
-                LOG.e(TAG, "Invalid style, must be either 'default', 'lightcontent' or the deprecated 'blacktranslucent' and 'blackopaque'");
+                LOG.e(TAG, "Invalid style, must be either 'default', 'lightcontent', 'darkcontent' or the deprecated 'blacktranslucent' and 'blackopaque'");
             }
         }
     }

src/browser/StatusBarProxy.js

@@ -36,6 +36,7 @@ module.exports = {
     styleBlackTranslucent:notSupported,
     styleDefault:notSupported,
     styleLightContent:notSupported,
+    styleDarkContent: notSupported,
     styleBlackOpaque:notSupported,
     overlaysWebView:notSupported,
     styleLightContect: notSupported,

src/ios/CDVStatusBar.h

@@ -36,6 +36,7 @@
 
 - (void) styleDefault:(CDVInvokedUrlCommand*)command;
 - (void) styleLightContent:(CDVInvokedUrlCommand*)command;
+- (void) styleDarkContent:(CDVInvokedUrlCommand*)command;
 - (void) styleBlackTranslucent:(CDVInvokedUrlCommand*)command;
 - (void) styleBlackOpaque:(CDVInvokedUrlCommand*)command;
 

src/ios/CDVStatusBar.m

@@ -289,6 +289,8 @@ - (void) setStatusBarStyle:(NSString*)statusBarStyle
         [self styleDefault:nil];
     } else if ([lcStatusBarStyle isEqualToString:@"lightcontent"]) {
         [self styleLightContent:nil];
+    } else if ([lcStatusBarStyle isEqualToString:@"darkcontent"]) {
+        [self styleDarkContent:nil];
     } else if ([lcStatusBarStyle isEqualToString:@"blacktranslucent"]) {
         [self styleBlackTranslucent:nil];
     } else if ([lcStatusBarStyle isEqualToString:@"blackopaque"]) {
@@ -298,19 +300,24 @@ - (void) setStatusBarStyle:(NSString*)statusBarStyle
 
 - (void) styleDefault:(CDVInvokedUrlCommand*)command
 {
-    if (@available(iOS 13.0, *)) {
-        // TODO - Replace with UIStatusBarStyleDarkContent once Xcode 10 support is dropped
-        [self setStyleForStatusBar:3];
-    } else {
-        [self setStyleForStatusBar:UIStatusBarStyleDefault];
-    }
+    [self setStyleForStatusBar:UIStatusBarStyleDefault];
 }
 
 - (void) styleLightContent:(CDVInvokedUrlCommand*)command
 {
     [self setStyleForStatusBar:UIStatusBarStyleLightContent];
 }
 
+- (void) styleDarkContent:(CDVInvokedUrlCommand*)command
+{
+    if (@available(iOS 13.0, *)) {
+        // [self setStyleForStatusBar:UIStatusBarStyleDarkContent];
+        [self setStyleForStatusBar:3];
+    } else {
+        [self styleDefault: command];
+    }
+}
+
 - (void) styleBlackTranslucent:(CDVInvokedUrlCommand*)command
 {
     [self setStyleForStatusBar:UIStatusBarStyleLightContent];

src/windows/StatusBarProxy.js

@@ -78,6 +78,13 @@ module.exports = {
         }
     },
 
+    styleDarkContent: function () {
+        // dark text ( to be used on a light background )
+        if (isSupported()) {
+            getViewStatusBar().foregroundColor = { a: 0, r: 0, g: 0, b: 0 };
+        }
+    },
+
     styleBlackTranslucent: function () {
         // #88000000 ? Apple says to use lightContent instead
         return module.exports.styleLightContent();

tests/tests.js

@@ -54,6 +54,9 @@ exports.defineAutoTests = function () {
             expect(window.StatusBar.styleLightContent).toBeDefined();
             expect(typeof window.StatusBar.styleLightContent).toBe("function");
 
+            expect(window.StatusBar.styleDarkContent).toBeDefined();
+            expect(typeof window.StatusBar.styleDarkContent).toBe("function");
+
             expect(window.StatusBar.styleBlackOpaque).toBeDefined();
             expect(typeof window.StatusBar.styleBlackOpaque).toBe("function");
 
@@ -96,6 +99,11 @@ exports.defineManualTests = function (contentEl, createActionButton) {
         StatusBar.styleDefault();
     }
 
+    function doColor4() {
+        log('set style=darkcontent');
+        StatusBar.styleDarkContent();
+    }
+
     var showOverlay = true;
     function doOverlay() {
         showOverlay = !showOverlay;
@@ -114,6 +122,8 @@ exports.defineManualTests = function (contentEl, createActionButton) {
         '</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' +
@@ -145,6 +155,10 @@ exports.defineManualTests = function (contentEl, createActionButton) {
         doColor3();
     }, 'action-color3');
 
+    createActionButton("Style=dark", function () {
+        doColor4();
+    }, 'action-color4');
+
     createActionButton("Toggle Overlays", function () {
         doOverlay();
     }, 'action-overlays');

types/index.d.ts

@@ -26,6 +26,7 @@ interface StatusBar {
 
     /**
     * Use the default statusbar (dark text, for light backgrounds).
+    * For iOS - dark or light text depending on a device configuration.
     */
     styleDefault(): void;
 
@@ -34,6 +35,11 @@ interface StatusBar {
     */
     styleLightContent(): void;
 
+    /**
+     * Use the darkContent statusbar (dark text, for light backgrounds).
+     */
+    styleDarkContent(): void;
+
     /**
     * Use the blackTranslucent statusbar (light text, for dark backgrounds).
     */

www/statusbar.js

@@ -49,7 +49,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 depending on a device configuration )
         exec(null, null, "StatusBar", "styleDefault", []);
     },
 
@@ -58,6 +58,11 @@ var StatusBar = {
         exec(null, null, "StatusBar", "styleLightContent", []);
     },
 
+    styleDarkContent: function () {
+        // dark text ( to be used on a light background )
+        exec(null, null, "StatusBar", "styleDarkContent", []);
+    },
+
     styleBlackTranslucent: function () {
         console.warn('styleBlackTranslucent is deprecated and will be removed in next major release, use styleLightContent');
         exec(null, null, "StatusBar", "styleBlackTranslucent", []);