iOS DarkMode Adapter
Just last month, we media in China began to spread the rumor that Apple had asked developers to adapt Diablo mode. There were also rumors that Apple had told wechat to make diablo mode mandatory. The next day, wechat’s official team announced that Diablo mode had been adapted and would be available in the next version. It was not long before you really experience to the broad masses of the long-awaited diablo pattern, but as an iOS users, I didn’t think WeChat diablo pattern have much good, even think sometimes will bring me some trouble, it is best to make a switch in the WeChat, what allows users to choose their own display mode. But then I thought, if I did that is not very similar to the theme function that was very popular a few years ago…… Feel in the ghost…….
As a low-end iOS developer, when iOS13 came out, we didn’t choose to adapt at first. We chose a simple and quick solution, turning off the Dark mode globally. Just do the following:
1. In the info.plist file, add UIUserInterfaceStyle key with the name UserInterfaceStyle as String.
2. Set UIUserInterfaceStyle key to Light
So you’ll see that the interface is exactly the same as before, but there’s one more subtle thing that needs to be done, and that’s that the status bar doesn’t have to be affected by the values that are added to it, so we need to adapt the status bar
If (@ the available (iOS 13.0, *)) {[UIApplication sharedApplication]. StatusBarStyle = UIStatusBarStyleDarkContent; }else{ [UIApplication sharedApplication].statusBarStyle = UIStatusBarStyleDefault; }Copy the codeDarkMode Specifies the color of the text
During the test, I found that when we used UILabel to display the text, the system would automatically adjust the color through the realistic mode as long as the color was not set. But in real development, you can’t use one color all the time, and you can’t use white all the time.
So let’s take a look at how to do by switching display mode automatically switch text color?
When you think about it, Apple has it all figured out for you. There’s a function in the iOS13 SDK
+ (UIColor *)colorWithDynamicProvider:(UIColor * (^)(UITraitCollection *traitCollection))dynamicProvider API_AVAILABLE (ios (13.0), tvos (13.0)) API_UNAVAILABLE (watchos);Copy the codeThis is a dynamic color setting, so we just need to write a Category of UIColor to count the colors used in our project, and also ask the UI designer to design for you the color of each text in dark mode. In this way, we can complete the adaptation of text color, in fact, LATER I found that not only text, as long as the color involved can be processed in this way.
Below is my simple write a few colors, just for your reference:
#import <UIKit/UIKit.h>
NS_ASSUME_NONNULL_BEGIN
@interface UIColor (DarkMode)
+ (UIColor *)textColor;
+ (UIColor *)viewControllerBackGroundColor;
@end
NS_ASSUME_NONNULL_END
Copy the code#import "UIColor+DarkMode.h" @implementation UIColor (DarkMode) + (UIColor *)colorWithHex:(UInt32)hex andAlpha:(CGFloat)alpha { int r = (hex >> 16) & 0xFF; int g = (hex >> 8) & 0xFF; int b = (hex)&0xFF; Return [UIColor colorWithRed:r / 255.0f green: G / 255.0f blue: B / 255.0f alpha:alpha]; } + (UIColor *)textColor{if (@available(iOS 13.0, *)) { return [UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull trait) { if (trait.userInterfaceStyle == UIUserInterfaceStyleDark) { return [UIColor whiteColor]; } else { return [UIColor blackColor]; } }];; }else{ return [UIColor blackColor]; ViewControllerBackGroundColor {if}} + (UIColor *) (@ the available (iOS 13.0, *)) { return [UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull trait) { if (trait.userInterfaceStyle == UIUserInterfaceStyleDark) { return [UIColor blackColor]; } else { return [UIColor whiteColor]; } }];; }else{ return [UIColor whiteColor]; } } @endCopy the codeDarkMode Image Assets
Above said the color adaptation, the following is about the picture adaptation:
1. Create an Assets file (or within an existing Assets file)
2. Create a new image resource file (or color resource file, or other resource file)
3. Check the resource file and open the Xcode ->View ->Show Attributes Inspectors (or Option+Command+4) View to change the Apperances options to Any, Dark
As of The third step, the resource file has several containers, including Any Apperance and Dark Apperance. The Any Apperance applies to Unspecified and Light conditions. Dark Apperance in Dark Mode
5. When the code is executed by default, it can be used by name normally, and the system will automatically obtain the corresponding resource file according to the current mode