* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

The author recently learned about DarkMode related colors, pictures and Web adaptation, and made a Demo QiDarkMode to share relevant content with everyone.

Dark Mode profile

In iOS 13.0 and later, people can opt for a darker system-wide look, called dark mode. Dark Mode is a new feature apple introduced in iOS13. IOS devices running iOS13 and later can use dark mode, where the system uses darker view controls. Developers need to adapt the corresponding dark mode to view controls in the development process.

DarkMode Demo renderings

The author made the adaptation examples of Dark Mode Color, Image and Web respectively, and recorded the following effect pictures respectively.

Trigger Dark Mode

    1. IOS can trigger DarkMode in other ways than the one shown above: Settings -> Show & Brightness -> Toggle the dark look.
    1. After running the project, click Xcode’sEnvironment Overrides, select Interface Style Light or Dark to toggle Light/Dark mode.

    1. Dark Mode is enabled on macOS10.14 and later. To switch Dark Mode, go to system preferences -> general -> appearance -> light/Dark

Two, adaptation preparation

1. @ the available (iOS 13.0. *)

First of all, when adapting Dark Mode, we need to specify the relevant API first.

if (@available(iOS 13.0, *)) {
    // Dark Mode ADAPTS related code
}
Copy the code

The above API is a long one, so I wrote the following macro to make it easier for you to use. The value is QiAvailable(13.0).

#define QiAvailable(version) @available(iOS version, *)
Copy the code

2. Find the desired background color and text color

Apple has some system colors available for developers to use to select background colors to fill in, combined with documentation prompts and testing in Storyboard. Test to select the text color to use.

3. None, Dark, Light, and Any modes during development

During the development process, you will need to set the image or color in Dark, Light, Any mode style.

The default Xcode image and color styles are None, and clicking on the attributes on the right side toggles the styles to Any,Dark or Any,Light,Dark.

This will be covered in the Middle Color Asset section below.

Third, Dark Mode Color

1. The system color

Normally we can specify the background color of our view in our base class controller, or in our base class view.

Such as:

self.view.backgroundColor = [UIColor systemBackgroundColor];

textField.textColor = [UIColor placeholderTextColor];

label.backgroundColor = [UIColor tertiarySystemBackgroundColor];
Copy the code

2. Be flexible with colors

If we need flexibility in setting the view background color or text color, we can use the one provided by Apple:

+ (UIColor *)colorWithDynamicProvider:(UIColor* (^) (UITraitCollection *traitCollection))dynamicProvider API_AVAILABLE(ios(13.0), tvos(13.0)) API_UNAVAILABLE(watchos);
Copy the code

Such as:

if (QiAvailable(13.0)) {
  self.view.backgroundColor = [UIColor systemBackgroundColor];
  
  / / equivalent to the
  // The desired color can be set in Dark and Light modes, such as a near-black color under Dark and a near-white color under Light
  self.view.backgroundColor = [UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull traitCollection) {
      if (traitCollection.userInterfaceStyle == UIUserInterfaceStyleLight) {
          return [UIColor whiteColor];
      } else if (traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {
          return [UIColor blackColor];
      }
      return [UIColor whiteColor];
  }];
}
Copy the code
label.textColor = [UIColor colorWithDynamicProvider:^UIColor * _Nonnull(UITraitCollection * _Nonnull traitCollection) {
     if (traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {
         return [UIColor lightTextColor];
     } else {
         return [UIColordarkTextColor]; }}];Copy the code

3. Color Asset

Add Color Asset as shown below:

You can select Dark, Light, Any for Color Asset; And the color to display in Dark or Any mode.

The way to use the Color Asset we created is:

[UIColor colorNamed:@"StarColor"];
Copy the code

+ (** NULlable ** UIColor *)colorNamed (NSString *)name API_AVAILABLE(ios(11.0)); This API is available for iOS11 and later.

According to CY, there are issues with the color of the API on ios 11.x, but apple has fixed the issue in the official release of Xcode11.

Add Color Asset, set Appearance to Any, and Dark. This indicates that the author only focuses on Dark mode and non-dark mode, and sets the non-dark mode to be displayed in blue and the Dark mode to be displayed in purple.

Iv. Dark Mode Image

1. Set the image in Dark or Any mode

	// Set multiple images in Asset
    UIImage *logoImage = [UIImage imageNamed:@"QiShare"];
    
    UIImageView *logoImageView = [[UIImageView alloc] initWithImage:logoImage];
    logoImageView.frame = CGRectMake(120.0.100.0, logoImage.size.width, logoImage.size.height);
    [self.view addSubview:logoImageView];
Copy the code

To set up an image in multiple modes, select Image -> Switch Appearance -> drag the image you want to display into the corresponding mode.

2. Listen for Dark mode to change and switch pictures

If our image resource is an image in the loaded bundle. So you can monitor the mode change in the following interface, and do the corresponding picture update operation.

- (void)traitCollectionDidChange:(nullable UITraitCollection *)previousTraitCollection API_AVAILABLE(ios(8.0));
Copy the code
@property (nonatomic.strong) UIImageView *logoImageView;
@property (nonatomic.strong) UIImage *lightLogoImage;
@property (nonatomic.strong) UIImage *darkLogoImage;
Copy the code
    self.darkLogoImage = [self qi_imageWithNamed:@"flutterLogo"];
    self.lightLogoImage = [self qi_imageWithNamed:@"QiShare"];
    UIImage *logoImg =self.lightLogoImage;
    
    UIImageView *logoImgV = [[UIImageView alloc] initWithImage:logoImg];
    self.logoImageView = logoImgV;
    [self.view addSubview:logoImgV];
    logoImgV.frame = CGRectMake(100.0.100.0, logoImg.size.width, logoImg.size.height);

Copy the code
- (void)traitCollectionDidChange:(UITraitCollection *)previousTraitCollection {
    [super traitCollectionDidChange:previousTraitCollection];
    
    if (QiAvailable(13.0)) {
        if ([self.traitCollection hasDifferentColorAppearanceComparedToTraitCollection:previousTraitCollection]) {
            if (self.traitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {
                self.logoImageView.image =
                self.darkLogoImage;
            } else {
                self.logoImageView.image =
                self.lightLogoImage; }}}}Copy the code

3. Change the picture tintColor

Control pictures in different modes to display corresponding tintColor.

    // tintColor changes the Image coloring
    UIImage *starImage = [UIImage imageNamed:@"star"];
    starImage = [starImage imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
    UIImageView *starImageView = [[UIImageView alloc] initWithImage:starImage];
    starImageView.frame = CGRectMake(100.0.220.0, starImage.size.width, starImage.size.height);
     starImageView.tintColor = [UIColor colorNamed:@"StarColor"];
    [self.view addSubview:starImageView];
Copy the code

+ (**nullable** UIColor *)colorNamed:(NSString *)name API_AVAILABLE(ios(11.0)); This API has been supported since iOS11.0.

A note for setting tintColor to work:

/ / UIImageRenderingModeAlwaysTemplate: Always draw the image as a template image, ignoring its color information
// Ignore the color of the image and draw the image as a template image
// Image display color is controlled by tintColor
Copy the code

5. Dark Mode Web

Dark Mode is supported in macOS10.14 Mojave. To switch between Dark Mode and light Mode, go to system preferences -> general -> appearance -> light/Dark.

The following content is a simple H5 file written by the author referring to Dark Mode Support in WebKit. If you need it, you can provide it to the front end students. Related content, the author has also used the local loading method in the Demo test, can be in different modes, normal switch.


      
<html>
<head>
<meta charset="utf-8">
<title>Qi test DarkMode</title>
	
<style>

:root {
    color-scheme: light dark;
    --special-text-color: black;
	
    --bg-color: white;
}

@media (prefers-color-scheme: dark) {
    :root {
		--special-text-color: white; 
        --bg-color: black; }}.special {
    color: var(--special-text-color);
    background-color: var(--bg-color);
}
	
body
{
	background-color:var(--bg-color);
}
h1
{
	color:var(--special-text-color);
	text-align:center;
}
p
{
	color:var(--special-text-color);
	font-family:"Times New Roman";
	font-size:20px;
}
	

	</style>
</head>

<body>

<h1>Test the DarkMode title</h1>
<p>DarkMode paragraphs.</p>

	<picture>
	<source srcset="http://img.zcool.cn/community/[email protected]" media="(prefers-color-scheme: dark)">
	<img src="http://p0.so.qhmsg.com/t0184f2659879a11464.jpg".width="300">
</picture>

</body>
</html>
Copy the code

Sixth, the Demo

See Demo: QiDarkMode for details

Refer to study website

  • Webkit.org/blog/8840/d…
  • Developer.apple.com/documentati…
  • Developer.apple.com/design/huma…

To learn more about iOS and related new technologies, please follow our official account:

Xiaobian wechat: You can add and pull into “QiShare Technical Exchange Group”.

QiShare(Simple book) QiShare(digging gold) QiShare(Zhihu) QiShare(GitHub) QiShare(CocoaChina) QiShare(StackOverflow) QiShare(wechat public account)

Recommended articles: Swift 5.1 (3) – String Write a simple page with Flutter for 5 minutes, Markdown Grammar Swift 5.1(2) – Operator Swift 5.1(1) – Basics Sign In With Apple (a) Weird Dance weekly