iOS暗黑模式(Dark Mode)WKWebview适配【附代码】

今天爱分享给大家带来iOS暗黑模式(Dark Mode)WKWebview适配【详细讲解】，希望能够帮助到大家。

现在大部分需要注册登录的APP都有一个隐私协议，而这个网页通常是使用WKWebview进行加载的(说到这里在提醒大家一下：webview也被废弃了，所以大家快转换到WKWebview上来)。这时候如果大家能叫前端帮忙适配，那肯定非常省事了。但是如果需要自己进行适配，那么也是可以的。核心就是通过JS代码去动态的修改HTML的背景色。先上代码在进行解释：

#import "ViewController.h"
#import <WebKit/WebKit.h>
@interface ViewController ()<WKNavigationDelegate>
@property (nonatomic, strong) WKWebView *webView;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    [self loadHtmlWithWKView];
}

-(void)loadHtmlWithWKView{
    WKWebViewConfiguration *wkWebconfigura = [[WKWebViewConfiguration alloc]init];
    WKWebView *wkView = [[WKWebView alloc]initWithFrame:self.view.bounds configuration:wkWebconfigura];
    [wkView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"https://juejin.im/welcome/ios"]]];
    wkView.navigationDelegate = self;
    self.webView = wkView;
    [self.view addSubview:wkView];
    self.webView.hidden = YES;
}
//navigationDelegate 当网页加载完毕后会调用
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{
    NSString *backgroundColor = @"";
    NSString *labelColor = @"";
    if (@available(iOS 13.0, *)) {
        if (UITraitCollection.currentTraitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {
            backgroundColor = @"\"#001A1A\"";
            labelColor = @"'#FF0000'";
        }else{
            backgroundColor = @"\"#FFFFFF\"";
            labelColor = @"'#666666'";
        }
    } else {
        self.webView.hidden = NO;
        return;
    }
    //写入JS代码
    [self.webView evaluateJavaScript:[NSString stringWithFormat:@"document.body.style.backgroundColor=%@",backgroundColor] completionHandler:nil];
    [self.webView evaluateJavaScript:[NSString stringWithFormat:@"document.getElementsByTagName('body')[0].style.webkitTextFillColor=%@",labelColor] completionHandler:nil];
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        self.webView.hidden = NO;
    });
    
}

@end

核心思想就是通过JS代码去动态的修改网页的背景颜色和文字颜色。在webView:(WKWebView *)webView didFinishNavigation的时候进行当前模式的判断，在通过JS代码进行修改网页的颜色。有人可能会问，为什么不用WKUserScript去进行设置了，我试过了，不起作用。用下面的同一句代码进行设置，没有任何反应，我以为是因为后加载的网页覆盖掉了之前设置的背景颜色，说以在开始的JS代码里面加入了!important,结果也是不行的。为什么先对webView进行隐藏呢，这是因为我的APP隐私协议的背景颜色默认就是白色的，所以加载的时候会先显示白色，然后马上闪到我设置的颜色，对于用户来说，体验不是很好，所以先进行隐藏，而进行0.5s的延时在显示是因为那时候还没设置完，所以有时候会出现没改过来，或者是也会出现闪现的情况。下面看下效果：

修改成功，但是由于示例的li也是有背景颜色的，而我们修改的是body的背景，所以会有白色的cell。可以看到勾选swift/flutter的背景就是我们设置的背景，而我们的隐私协议一般都是P标签组成的，所以如果你的隐私协议修改body的背景不成功的话可以具体针对你的具体需求进行修改。