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.
Related
When I am using window background transparency in my app made for MacOS, when the system is switching from light to dark, or back, the colour change does not work.
This is how I change the transparency on the window background.
self.view.window?.backgroundColor = NSColor(named: "BackgroundColor")!.withAlphaComponent(WindowTransparency)
With the above code when I change the style from light to dark, it do not change.
When I am changing the code to
self.view.window?.backgroundColor = NSColor(named: "BackgroundColor")!
than the result is expected. With the system notification I call this line and it is perfectly changing the background color.
What can be the problem?
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'
}
With the introduction of Page Sheets in iOS 13, there is a white background in my app that I cannot seem to be able to change (behind the white Page Sheet, and the grey top of the underlying page):
Obviously, for most apps a black background color would look much better.
While for ejected React Native apps, one could use:
https://github.com/johniak/react-native-root-view-background
I'm curious if anyone using managed Expo has figured out a way to deal with this. As I cannot find much complaints about this issue, other than:
https://github.com/expo/expo/issues/1563
There is an simple trick using navigator...
<NavigationContainer>
<Stack.Navigator
screenOptions={{
cardStyle: {
backgroundColor: 'Your_Color_Here'
}
}}
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen name="Register" component={RegisterScreen} />
</Stack.Navigator>
</NavigationContainer >
You can use cardStyle to change default white backgroundColor to your desire backgroundColor. I hope this answer helps use it works for me.
For anyone out there who's using #react-navigation and looking for a way to change the background color of the root view between tab changes: simply add backgroundColor prop to app.json:
"backgroundColor": "#000000",
Might work in other scenarios as well.
I guess you are using react-navigation 5.x with createNativeStackNavigator and then using presentation:"modal" in your screen options. I could not find a way to set a black background the on the root view with this type of navigator.
Here's what I ended up doing :
create a standard StackNavigator with createStackNavigator, with mode='modal' property.
put all my modals within this navigator at the root of my app with ...TransitionPresets.ModalPresentationIOS in my screen options. This mimics the behavior you are looking for, as createStackNavigator respects the backgroundColor property set in your app.json file for it's root view.
I came up with this solution after finding this Snack (https://snack.expo.io/#satya164/modal-presentation-style-in-react-navigation). This is far from perfect but the best I could do for now using managed Expo. With nesting navigators, I keep using createNativeStackNavigator for push navigators to get nice, native push transitions for anything other than modals.
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+
I'm a beginner with iOS app development and want to customize the Status Bar colour. I have set my scene to a dark background and I want to battery and time in the Status Bar to match the colour.
At the moment I have added
var navigationBarAppearace = UINavigationBar.appearance()
UIApplication.shared.statusBarStyle = .lightContent
in AppDelegate.swift
Is there a way to add a custom hex colour for the text, not background?
I'm afraid there isn't without accessing private API's, which will get your app declined from apple review.
It's best to just find a way to make your app design work with the given, white or black status bar style.
The one thing you could do is create your own status bar that imitated the UIStatusBar, with your own labels and icons, but that would be a reasonable amount of hassle.