In buidling a PWA with ionic and capacitor. I've just updated my iPhone to iOS 15.1. When building for production, I noticed that the statusbar had a green color. I changed my apple-mobile-web-app-status-bar-style to black-transculent. Build the app again, added to home screen but still the status bar had a green color.
I inspected my manifest.json file and noticed that the theme_color property was set to #4DBA87. I looked this color up and it turned out to be the exact same color as the green color my statusbar has. Changed this color to #FFFFFF build the app again, added to home screen but still my statusbar stays the green color.
I'm a bit lost now what to do. I've made sure that after each build I cleared my cache to make sure the new build was loaded into safari. When I still had iOS 14.7.x the statusbar was white. I already looked up the release notes on iOS 15.1 but it doesn't say anything about changes in html properties regarding safari.
Any thoughts on this?
It turned out thatmy pwa configuration settings in vue.config.js caused a 2x <meta name="theme-color" /> tag in my index.html. the latter being the one with the green color, which was caused due to the fact that this tag was hard coded in my index.html and the vue pwa plugin also generated this tag, being the last one (order wise) with the green color.
I removed the hard coded tag, set the themeColor property in vue.config.js to #FFFFFF and all is well now.
vue.config.js:
pwa: {
appleMobileWebAppCapable: 'yes',
appleMobileWebAppStatusBarStyle: 'black-transculent',
themeColor: '#FFFFFF'
}
Related
How do I display the dark mode icon while in Light mode on an iOS device? I have been searching this issue for months now and every post seems to come to dead end or the solutions just don't work. Using Xamarin 17.3 & VS 2022 and and developing an app for both Android & iOS. We have the Shell's background color (<Setter Property="Shell.BackgroundColor" Value="141B4D") which is a dark blue. The default, black icons (battery, time & etc.) don't show well with this background (its a company color and can't change it.) Android seems to handle this on its own and I didn't have to make any changes & the light icons show on the dark background in both Light & Dark modes. But on iOS in light mode the black icons display but cannot be seen. In dark mode the light icons show just fine.
Awhile back I tried a suggestion to to tell it, in the shared app, to use the dark mode icons in light mode.
<Shell.Resources>
<ResourceDictionary>
<Style x:Key="BaseStyle" TargetType="Element">
<Setter Property="Shell.BackgroundColor" Value="{AppThemeBinding Dark=Black, Light=#141B4D}" />
<Setter Property="Shell.ForegroundColor" Value="{AppThemeBinding Dark=White, Light=White}" />
But this doesn't work. So I really need some help in solving this. And if this is not the proper way to handle this a good alternative is welcomed.
Thanks
Based on your code, seems that you just want the text or icon in statusbar to be white if i understand correctly. So a simple way to achieve is to add the following code in AppDelegate:
public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
...
UIApplication.SharedApplication.StatusBarStyle = UIStatusBarStyle.LightContent;
return base.FinishedLaunching(app, options);
}
Also, you have to add one key in info.plist
<key>UIViewControllerBasedStatusBarAppearance</key>
<false/>
Note: in Property List Editor, it will show View controller-based status bar appearance
Then in dark blue background, you can also see white icon. The following picture is in light mode.
Hope it works for you.
I tried making the small icon exactly 16x16, gray-scaled, nothing but gray and white (the gray color being hex value 616161), to create a silhouette of my application icon.
Yet no matter what it just shows up as a white/gray square in the notifications. What am I doing wrong?
(My min api is 21, assuming it is relevant)
Follow this link
First let’s understand the Android documentation which is as follows
“Update or remove assets that involve color. The system ignores all
non-alpha channels in action icons and in the main notification icon.
You should assume that these icons will be alpha-only. The system
draws notification icons in white and action icons in dark gray.”
Now this is easy to miss and I have seen many apps that are live in the app store with thousands of users who haven’t followed the mentioned guidelines.
So let me explain in detail how you can convert your notification icon to an Android friendly one with a few clicks.
In your favourite image editor open up your icon file. Convert all parts of the image that you don’t want to show to transparent pixels. All colors and non transparent pixels are displayed in white. Let us go through an example.
EDITED: Thanks #Andrey Patseiko for the tool
For notification you have to use different icons for different versions of android:
Notification notification = new Notification.Builder(context)
.setAutoCancel(true)
.setContentTitle("My notification")
.setContentText("Look, white in Lollipop, else color!")
.setSmallIcon(getNotificationIcon())
.build();
return notification;
Get notification icon on the basis of version
private int getNotificationIcon() {
boolean useWhiteIcon = (android.os.Build.VERSION.SDK_INT >= android.os.Build.VERSION_CODES.LOLLIPOP);
return useWhiteIcon ? R.drawable.icon_silhouette : R.drawable.ic_launcher;
}
Along with new features and capabilities, Android 5.0 includes a variety of system changes and API behavior changes. See the notification behavior changes.
Notifications are drawn with dark text atop white (or very light)
backgrounds to match the new material design widgets. Make sure that
all your notifications look right with the new color scheme. If your
notifications look wrong, fix them:
Use setColor() to set an accent color in a circle behind your icon image.
Update or remove assets that involve color. The system ignores all non-alpha channels in action icons and in the main notification icon.
You should assume that these icons will be alpha-only. The system
draws notification icons in white and action icons in dark gray.
So, basically you have to use silhouette icons as notification icon for API Level 21+
Since iOS 11, when the UIWebView is full screen, a fake background appears on the status bar with the same color of the UIWebView background.
Anyone knows how to get rid of it?
Even adding the IUWebView to a storyboard and make it full screen will make the status bar background to appear
I've been trying to edit the size and some other properties of the UIWebView and none of them worked, but it's definitely something from the UIWebView.
Also tried to see all the subviews and it's sizes and didn't see anything strange.
Attached a screenshot, see the grey "statusbar", it disappears when scrolling, and doesn't appear if the UIWebView is not over that part of the screen.
I want it as on the second screenshot, only remove the fake background, not the status bar.
This happens because of UIScrollView new behavior to adjust the content inset to include safe area insets like the status bar.
To fix it, just set it to UIScrollViewContentInsetAdjustmentNever
[self.webView.scrollView setContentInsetAdjustmentBehavior:UIScrollViewContentInsetAdjustmentNever];
Since iOS 11 Beta 4 you can add this to your viewport and will also remove the fake statusbar
viewport-fit=cover
To do this entirely in HTML/CSS, viewport-fit=cover in the Viewport meta tag is the correct way to handle this.
But you'll also want to adjust your padding dynamically to handle the differently sized status bar on iPhone X with its notched camera/speaker.
Luckily, Apple exposed some CSS constants for the safe area insets, so you can take advantage of those in your CSS:
i.e., padding-top: constant(safe-area-inset-top);
I wrote a bit more about this scenario and the new features for iOS 11 and iPhone X: https://ayogo.com/blog/ios11-viewport/
Swift version:
webView.scrollView.contentInsetAdjustmentBehavior = .never
I was trying to find answer to my problem but I couldn't figure it out.
I've imported my own icons to icons assets which are white and in .png format and I want to use them in tab bar item. Everything works great but when the screen is inactive the icon is gray. I want it to be white as original. I've tried to change "render as" in assets but then the icon doesn't change when the screen gets active.
Is there any way to fix it?
Thanks for all help. https://i.stack.imgur.com/mzDl3.png
TRY THIS-:
var image = UIImage(named:"your image")?.withRenderingMode(.alwaysOriginal)
I can do almost everything else with nwjs so I find my failure to make this work very frustrating.
I have made the simplest of html file with <body style="background-color:rgba(0,0,0,0);"></body> and "transparent":true, in the window section of package.json, but the window background remains white.
(I have a new Dell tablet PC running windows 8.1.)
Something I've missed?
#chris .... quick check -- do you have your Windows "Theme" set to an "Aero" type, which allows for transparency? I'm not sure on Windows 8.1, but on 7 the "standard" desktop themes don't allow for transparency (shadowed, rounded elements) whereas the Aero desktop theme(s) do.