diff --git a/README.md b/README.md index 1d0ce9c7..53a6bca4 100644 --- a/README.md +++ b/README.md @@ -57,7 +57,7 @@ Preferences -- __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. @@ -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 ------------------- diff --git a/src/android/StatusBar.java b/src/android/StatusBar.java index 5159ada4..90f5e9fc 100644 --- a/src/android/StatusBar.java +++ b/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'"); } } } diff --git a/src/browser/StatusBarProxy.js b/src/browser/StatusBarProxy.js index 3290d58c..113c5bd5 100644 --- a/src/browser/StatusBarProxy.js +++ b/src/browser/StatusBarProxy.js @@ -36,6 +36,7 @@ module.exports = { styleBlackTranslucent:notSupported, styleDefault:notSupported, styleLightContent:notSupported, + styleDarkContent: notSupported, styleBlackOpaque:notSupported, overlaysWebView:notSupported, styleLightContect: notSupported, diff --git a/src/ios/CDVStatusBar.h b/src/ios/CDVStatusBar.h index 0be08cc3..ba7b0e80 100644 --- a/src/ios/CDVStatusBar.h +++ b/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; diff --git a/src/ios/CDVStatusBar.m b/src/ios/CDVStatusBar.m index 058bbefb..903f1adf 100644 --- a/src/ios/CDVStatusBar.m +++ b/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,12 +300,7 @@ - (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 @@ -311,6 +308,16 @@ - (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]; diff --git a/src/windows/StatusBarProxy.js b/src/windows/StatusBarProxy.js index 3929ff0a..a472b229 100644 --- a/src/windows/StatusBarProxy.js +++ b/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(); diff --git a/tests/tests.js b/tests/tests.js index 5a8fe396..81ea54ac 100644 --- a/tests/tests.js +++ b/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) { '

' + 'Expected result: Status bar text will be a light (white) color' + '

' + + 'Expected result: Status bar text will be a dark (black) color
for iOS - a device theme depending (black or white) color' + + '

' + 'Expected result: Status bar text will be a dark (black) color' + '

' + 'Expected result:
Overlay true = status bar will lay on top of web view content
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'); diff --git a/types/index.d.ts b/types/index.d.ts index 608f989e..0c50729a 100644 --- a/types/index.d.ts +++ b/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). */ diff --git a/www/statusbar.js b/www/statusbar.js index d6ab16b2..61f660f0 100644 --- a/www/statusbar.js +++ b/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", []);