Origin of dark pattern

After iOS13, apple introduced a mobile phone dark mode, as the existence of a similar theme, the user can switch brunet with light color two kinds of mode, for the user experience is great, but brought us developers and workload, is APP needs to fit two kinds of mode switch, then we talk about how to fit two modes. First of all, all UI controls provided by UIKit itself (such as UIView, UILabel, UITextView, etc.) will automatically adapt to dark mode as long as they are not specially set for colors and other content, which is something we developers do not need to care about. In the process of adapting dark color mode, as developers, we really only need to solve two problems: 1. How to determine the current color mode of the system? 2. Which UI content should we use in dark mode?

How to determine the current system color mode?

Familiar UIView, UIViewController, UIScreen, and UIWindow already comply with a protocol called UITraitEnvironment. Each of these classes has a property called traitCollection, which has a userInterfaceStyle property, and the color mode is in userInterfaceStyle. We can use the traitCollection's userInterfaceStyle to determine the current system color mode.Copy the code

Which UI content should we adapt to dark mode?

For dark mode, our main concern is color, image, blur effect. Because these three aspects are easier to bind to colors.

color

So after iOS13, UIKit gives us a lot of dynamic colors, so anything that starts with system is dynamic colors, when we set dynamic colors for UI controls. The UI control will automatically display the corresponding color based on whether the current mode is dark or not. Such as this: the self. The backgroundColor = [UIColor systemRedColor]; Of course, these dynamic colors provided by the system cannot meet our actual development needs, so in the actual development, we can create our own custom dynamic colors. In iOS 13, UIKit provides a new API for UIColor to create our own dynamic colors.

UIColor *color = [UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull traitCollection) { If (traitCollection userInterfaceStyle = = UIUserInterfaceStyleDark) {/ / return the color of dark mode [UIColor blueColor]; }else {return [UIColor purpleColor];}}]; self.view.backgroundColor = color;Copy the code

In addition to this API, we can also use a new feature in Xcode11 to set the color representation of xcassets in both dark and light colors. \

Usage:

self.view.backgroundColor = [UIColor colorNamed:@"testColor"];

The picture

If you want to display different photos in normal mode and dark mode, you can also use the new Apperance property in Xcassets to set the images to be used in both modes:

blur

The fuzzy effect is what we often call the frosted glass effect. So, before iOS7, we used UIToolBar to do this. After iOS8, apple added a class called UIVisualEffectView specifically for this blurring effect. The code is simple.

Copy the code

After iOS13, UIKit also provides us with four dynamic blur styles:

This style is used to specify UIBlurEffectStyleSystemChromeMaterial run the application on macOS border colorSo if you want the blur effect to match the dark mode directly above four dynamic blur styles can be.

H5 interface ADAPTS to dark mode

If the project has a nested H5 interface, the content of the H5 interface may also need to be adapted to dark mode. You can use THE PREFERn-color-scheme to specify CSS styles for dark and light modes.

If we want a single view to be displayed in a fixed display mode,

We can use setOverrideUserInterfaceStyle this method to set the view mode.

[self.view setOverrideUserInterfaceStyle:UIUserInterfaceStyleLight];

If we want an interface to display in a fixed mode, we can initialize the style in BaseViewController or override it in subclassesoverrideUserInterfaceStyleMethod to return a fixed display mode.

-(UIUserInterfaceStyle)overrideUserInterfaceStyle { return UIUserInterfaceStyleDark; }

If you want your App to display in a fixed mode, you just need toInfo.plistfileUIUserInterfaceStyleSet toLight 或 DarkThat’s it.

All of the above are approvedLogical iOS technical numberCarry on reprint and study.