如何为WkWebViewRenderer中更改的文本激活暗模式？

在WkWebViewRenderer中实现暗模式，通常涉及到对网页内容的样式进行修改，以适应暗色背景和浅色文字。以下是实现这一功能的基础概念、优势、类型、应用场景以及可能遇到的问题和解决方案：

基础概念

暗模式（Dark Mode）是一种用户界面设计，它使用深色背景和浅色文字来减少眼睛疲劳和提高可读性，尤其在低光环境下。在移动应用和网页中，暗模式可以通过CSS和JavaScript来实现。

优势

提高可读性：在低光环境下，暗模式可以减少眼睛疲劳。
节能：对于OLED屏幕，暗模式可以减少能耗。
美观：提供多样化的用户界面风格，满足不同用户的偏好。

类型

系统级暗模式：由操作系统控制，应用跟随系统设置自动切换暗模式。
应用级暗模式：应用内部独立实现暗模式，不受系统设置影响。

应用场景

移动应用：如新闻阅读、社交媒体、邮件客户端等。
网页：如博客、论坛、在线文档等。

实现方法

在WkWebViewRenderer中实现暗模式，可以通过以下几种方法：

方法一：使用CSS变量

在网页的CSS文件中定义暗模式的样式，并通过JavaScript检测系统主题，动态切换样式。

/* 定义暗模式样式 */
:root {
  --background-color: #ffffff;
  --text-color: #000000;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #121212;
    --text-color: #ffffff;
  }
}

body {
  background-color: var(--background-color);
  color: var(--text-color);
}

// 检测系统主题并切换样式
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
  document.documentElement.classList.add('dark-mode');
} else {
  document.documentElement.classList.remove('dark-mode');
}

方法二：通过JavaScript注入样式

在WkWebView中注入JavaScript代码，动态修改网页的样式。

let jsCode = """
var style = document.createElement('style');
style.innerHTML = 'body { background-color: #121212; color: #ffffff; }';
document.head.appendChild(style);
"""
webView.evaluateJavaScript(jsCode, completionHandler: nil)

可能遇到的问题及解决方案

问题1：暗模式没有生效

原因：可能是CSS选择器不正确，或者JavaScript代码没有正确执行。 解决方案：

检查CSS选择器是否正确。
确保JavaScript代码在页面加载完成后执行。

问题2：暗模式切换不灵敏

原因：可能是系统主题变化监听不及时。 解决方案：

使用window.matchMedia监听系统主题变化，并及时更新样式。

const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
mediaQuery.addEventListener('change', (e) => {
  if (e.matches) {
    document.documentElement.classList.add('dark-mode');
  } else {
    document.documentElement.classList.remove('dark-mode');
  }
});