Comments (23)
Adding the following to my config.xml worked for me as a workaround:
<config-file parent="UIUserInterfaceStyle" platform="ios" target="*-Info.plist">
<string>Light</string>
</config-file>
from cordova-plugin-statusbar.
Adding the following to my config.xml worked for me as a workaround:
<config-file parent="UIUserInterfaceStyle" platform="ios" target="*-Info.plist"> <string>Light</string> </config-file>
For me what worked was adding in the config.xml:
<widget>
...
<platform name="ios">
...
<edit-config file="*-Info.plist" mode="merge" target="UIUserInterfaceStyle">
<string>Light</string>
</edit-config>
</platform>
<widget>
Edit: Doesn't seem to work on the splash screen though
from cordova-plugin-statusbar.
As a temp workaround you can disable dark mode for an app, https://developer.apple.com/documentation/appkit/supporting_dark_mode_in_your_interface/choosing_a_specific_interface_style_for_your_ios_app
from cordova-plugin-statusbar.
As a workaround add the following to the config.xml:
<config-file target="*-Info.plist" parent="UIUserInterfaceStyle">
<string>Light</string>
</config-file>
<config-file target="*-Info.plist" parent="UIViewControllerBasedStatusBarAppearance">
<true />
</config-file>
It adds UIUserInterfaceStyle and UIViewControllerBasedStatusBarAppearance properties to platforms/ios/{appname}/{appname}-Info.plist
.
In case of issues check that this file has the properties added.
from cordova-plugin-statusbar.
Workaround to fix this:
-
Instal the
plist
package vianpm install --save-dev plist
-
Add this to your
config.xml
file under<platform name="ios">
tag, so it will be:
<platform name="ios"> <hook src="hooks/ios_fix_dark_mode.js" type="after_prepare" /> </platform>
-
On your root folder, create a folder calles
hooks
and inside it, create a file calledios_fix_dark_mode.js
. -
Inside that file, paste this code below, replacing
[Your App Name]
to your own app's name. You can also, go intoplatforms/ios/
and see which name it is to double check.
var fs = require('fs');
var path = require('path');
var plist = require('plist'); // npm install --save-dev plist
let plistDir = path.join(
__dirname,
'../platforms/ios/[Your App Name]/[Your App Name]-Info.plist'
);
editPlistFile();
function editPlistFile() {
var xml = fs.readFileSync(plistDir, 'utf8');
var newPlistData = plist.parse(xml);
// console.log(newPlistData); // uncomment to see the old plist file's content
newPlistData.UIUserInterfaceStyle = 'Light';
newPlistData.UIViewControllerBasedStatusBarAppearance = true;
// console.log(newPlistData); // uncomment to see the new plist file's content
xml = plist.build(newPlistData);
fs.writeFileSync(plistDir, xml, { encoding: 'utf8' });
}
- Every time you use one of those commands below, this code will run, making sure that the correct plist is used.
cordova platform add
cordova build
cordova run
all variants with ionic in the beginning
from cordova-plugin-statusbar.
Yeah, then on iOS 13 we should use that new value and default in older versions and reduce the styles to dark and light
from cordova-plugin-statusbar.
The workaround doesnt allow to detect darkmode via css anymore.
from cordova-plugin-statusbar.
The workaround doesnt allow to detect darkmode via css anymore.
Yes correct i have the same Problem. Please fix this Issue
from cordova-plugin-statusbar.
I'm thinking that in order to support dark mode, we'll have to first determine whether the UI is in dark mode and maybe reverse the "light" status bar styles with the "dark" status bar styles.
So in otherwords while in Dark mode, if you're using
default
, it may useblackopaque
instead.But I'm not entirely sure if that's a good idea since you can't apply the same logic in reverse without cause breaking behaviour.
Considering most iOS styles are deprecated, I don't think it's too bad if we release a major version with just 2 styles.
But the real problem is:
In Light mode, default is black and the others are white
In Dark mode, default is white and the others are also white, so it's not possible to set it to black while in dark mode.
from cordova-plugin-statusbar.
I found I had to also set UIViewControllerBasedStatusBarAppearance to true:
<edit-config file="*-Info.plist" mode="merge" target="UIViewControllerBasedStatusBarAppearance">
<true />
</edit-config>
from cordova-plugin-statusbar.
@dmitryevseev If this value is set, executing window.matchMedia('(prefers-color-scheme: dark)').matches
in the webview will always return false.
This led me to spend some energy looking for the source of the error. If the project starts to consider dark mode compatibility someday, don't forget to remove this code first.
from cordova-plugin-statusbar.
I am using ionic 6. I have tried all above options but still my status bar is not visible in dark theme in iPhone XR . For light theme it is working fine. Suggest solution on urgent basis
from cordova-plugin-statusbar.
I'm thinking that in order to support dark mode, we'll have to first determine whether the UI is in dark mode and maybe reverse the "light" status bar styles with the "dark" status bar styles.
So in otherwords while in Dark mode, if you're using default
, it may use blackopaque
instead.
But I'm not entirely sure if that's a good idea since you can't apply the same logic in reverse without cause breaking behaviour.
from cordova-plugin-statusbar.
As a temp workaround you can disable dark mode for an app, https://developer.apple.com/documentation/appkit/supporting_dark_mode_in_your_interface/choosing_a_specific_interface_style_for_your_ios_app
This workaround did not work for me. No matter what I do, status bar is always white on white in dark mode.
from cordova-plugin-statusbar.
The docs seem to suggest that there is .darkContent for this, https://developer.apple.com/documentation/uikit/uistatusbarstyle, and it has a beta tag on it as if the docs have been updated for iOS 13?
from cordova-plugin-statusbar.
Adding the following to my config.xml worked for me as a workaround:
<config-file parent="UIUserInterfaceStyle" platform="ios" target="*-Info.plist"> <string>Light</string> </config-file>
This didn't work for me. I can see in Xcode that the "User Interface Style" attribute is correctly set to "Light", but still the status bar renders with white text. Any ideas?
from cordova-plugin-statusbar.
@p3v9d5ui If nothing works, write in the MainViewController.m:
- (void)viewDidLoad
{
[super viewDidLoad];
if (@available(iOS 13.0, *)) {
self.overrideUserInterfaceStyle = UIUserInterfaceStyleLight;
}
// Do any additional setup after loading the view from its nib.
}
Edit: Verified that the config entry in the cordova (9.0.1) and cordova-ios (5.0.1) works on iOS 13.1.2
from cordova-plugin-statusbar.
Has anyone tried this in Xcode 11.3.1? I tried all of the mentioned solutions and none of them worked for me
from cordova-plugin-statusbar.
Has anyone tried this in Xcode 11.3.1? I tried all of the mentioned solutions and none of them worked for me
async setStatusBar() {
if (this.platform.is('cordova')) {
this.statusBar.overlaysWebView(true);
if (this.platform.is('ios')) {
if (await this.getDarkMode()) {
this.statusBar.styleLightContent();
} else {
this.statusBar.styleLightContent();
}
}
if (this.platform.is('android')) {
if (await this.getDarkMode()) {
this.statusBar.styleLightContent();
} else {
this.statusBar.styleLightContent();
}
}
}
}
https://github.com/codextde/cordova-plugin-statusbar-color-fix
from cordova-plugin-statusbar.
"fs is not defined" when I tried these steps - have a working update?
Workaround to fix this:
- Instal the
plist
package vianpm install --save-dev plist
- Add this to your
config.xml
file under<platform name="ios">
tag, so it will be:
<platform name="ios"> <hook src="hooks/ios_fix_dark_mode.js" type="after_prepare" /> </platform>
- On your root folder, create a folder calles
hooks
and inside it, create a file calledios_fix_dark_mode.js
.- Inside that file, paste this code below, replacing
[Your App Name]
to your own app's name. You can also, go intoplatforms/ios/
and see which name it is to double check.var path = require('path'); var plist = require('plist'); // npm install --save-dev plist let plistDir = path.join( __dirname, '../platforms/ios/[Your App Name]/[Your App Name]-Info.plist' ); editPlistFile(); function editPlistFile() { var xml = fs.readFileSync(plistDir, 'utf8'); var newPlistData = plist.parse(xml); // console.log(newPlistData); // uncomment to see the old plist file's content newPlistData.UIUserInterfaceStyle = 'Light'; newPlistData.UIViewControllerBasedStatusBarAppearance = true; // console.log(newPlistData); // uncomment to see the new plist file's content xml = plist.build(newPlistData); fs.writeFileSync(plistDir, xml, { encoding: 'utf8' }); }
- Every time you use one of those commands below, this code will run, making sure that the correct plist is used.
cordova platform add cordova build cordova run all variants with ionic in the beginning
from cordova-plugin-statusbar.
Hey, just add var fs = require('fs');
to the top of the file. Sorry, my bad... It got cut out by github editor's
from cordova-plugin-statusbar.
Thanks, that made the build work, but the statusbar still ignores my preferences from config.xml:
<preference name="StatusBarBackgroundColor" value="#000000" /> <preference name="StatusBarStyle" value="blackopaque" />
that used to work pre-wkwebview. Any workarounds?
from cordova-plugin-statusbar.
@anujparmar545 Remove this code in the config.xml
(If they exist):
<config-file target="*-Info.plist" parent="UIUserInterfaceStyle">
<string>Light</string>
</config-file>
<config-file target="*-Info.plist" parent="UIViewControllerBasedStatusBarAppearance">
<true />
</config-file>
Recompile the project, then click on targets
- info
in xcode to check if there is a key named User Interface Style
and delete it if it exists.
from cordova-plugin-statusbar.
Related Issues (20)
- Failed to fetch plugin cordova-plugin-statusbar@cordova-plugin-statusbar via registry. HOT 4
- Add success and error callbacks for the `overlaysWebView` method
- StyleDefault will set light text instead of dark. HOT 3
- Xcode 12 and iOS 9.0 various deprecation
- 2.4.3 BROKEN - Replacement Release Desperately Needed HOT 5
- iOS - HTML video player full screen causes web view overlay issues HOT 2
- Empty space below the status bar on devices without notch and iOS 15.4 HOT 5
- Webview doesn't take full height after hide
- Device elements overlap ionic header HOT 6
- On android 12, statusbar styleDefault method not work as expected
- iPhone 14 Pro floating island status bar height incorrect HOT 5
- Status bar background color overridden on Android 13 HOT 2
- backgroundColorByHexString does not work? HOT 2
- Plugin not working on Android 13 with cordova [email protected] HOT 10
- change statusBar background color and icon color for only one screen(Page) for iOS and android HOT 1
- Android top and bottom content overlapped by status bar after upgrade from 2.4.3 to 3.0.0 HOT 10
- StatusBar not changing Color on Android 13 HOT 7
- StatusBar still there, stopped to work HOT 1
- Playing video on iOS and shifting from landscape to portrait messes up status bar HOT 5
- Bottom nav bar overlaps webview in Android 13 HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cordova-plugin-statusbar.