UIWebView 上的夜间模式问题

Question

我制作了某种使用 UIWebView 的阅读器。我想包含一个夜间模式功能，它将文本着色为白色和背景黑色，而不是白色背景上的普通黑色文本。

为此，我使用以下代码：

if (nightMode == YES)
{
    [self.view setBackgroundColor:[UIColor whiteColor]];
    NSString *setJavaScript = [[NSString alloc] initWithFormat:@"document.getElementsByTagName('body')[0].style.webkitTextFillColor= 'black'; document.getElementsByTagName('html')[0].style.backgroundColor= 'white'; DOMReady();"];
    [readerWebView stringByEvaluatingJavaScriptFromString:setJavaScript];
    [readerWebView.scrollView setBackgroundColor:[UIColor whiteColor]];
    [[NSUserDefaults standardUserDefaults] setBool:(NO) forKey:@"nightMode"];
    nightMode = NO;
}
else
{
    [self.view setBackgroundColor:[UIColor blackColor]];
    NSString *setJavaScript = [[NSString alloc] initWithFormat:@"document.getElementsByTagName('body')[0].style.webkitTextFillColor= 'white'; document.getElementsByTagName('html')[0].style.backgroundColor= 'black'; DOMReady();"];
    [readerWebView stringByEvaluatingJavaScriptFromString:setJavaScript];
    //[readerWebView setBackgroundColor:[UIColor blackColor]]; // doesn't solve it
    [readerWebView.scrollView setBackgroundColor:[UIColor blackColor]];
    [[NSUserDefaults standardUserDefaults] setBool:(YES) forKey:@"nightMode"];
    nightMode = YES;
}
[[NSUserDefaults standardUserDefaults] synchronize];

大多数情况下，这项工作都能找到并且我得到了我预期的结果。但有时它看起来像这样：

在 UIWebView 中设置的边距在应该为黑色时保持白色，在应该为白色时保持黑色。这似乎完全随机！特别是因为它不是在整个网页上，而是从向下 1024px 开始（确切地说，是 iPad 屏幕的高度）。

有人知道如何解决这个问题吗？

它在模拟器和真正的 iPad 上都有。

Answer 1

• 您也可以将此代码用于日夜模式。此代码可能会满足您的需要。
• 这适用于UIWebView。

代码是：

BOOL isNightMode;

- (IBAction)nightModeBtn_click:(id)sender {
    isNightMode = YES;
    [self.webView reload];
}
- (IBAction)dayModeBtn_click:(id)sender {
    isNightMode = NO;
    [self.webView reload];
}

- (void)webViewDidFinishLoad:(UIWebView *)_webView{
  if(isNightMode == YES){
    [self.webView setOpaque:NO];
    NSString *setJavaScript = [[NSString alloc] initWithFormat:@" document.getElementsByTagName('body')[0].style.webkitFilter='grayscale(100%%)';document.getElementsByTagName('div')[0].style.webkitFilter='grayscale(100%%)'; DOMReady();"];
    [self.webView stringByEvaluatingJavaScriptFromString:setJavaScript];
  }
}

Answer 2

（假设这里是我的 HTML 内容）。您从UIWebView 的外部 解决这个问题，我认为您需要将反转逻辑注入 网络视图。我建议您改为注入反转内容的 CSS（如 here 所描述的那样）。对您来说不利的是，如果您还不了解 CSS，您至少必须学习其中的一些内容，并且反转并不容易。但是由于难以控制 WebKit 中的实现细节（在未来的版本中也有很高的更改风险），可能会很难发现有问题的边缘情况。