黑暗模式适配方案：让您的Android富文本内容在夜间也熠熠生辉

Android

2023-11-27 02:36:05

夜间模式适配：提升移动设备上的阅读体验

在当今数字化时代，移动设备的使用已成为日常生活的常态。智能手机和平板电脑让人们随时随地获取信息和娱乐，但在夜间使用这些设备时，明亮的屏幕光线可能对眼睛和睡眠质量造成负面影响。

因此，为了提升用户体验，许多应用程序都集成了夜间模式 。此功能通过减少屏幕发出的蓝光量，降低屏幕亮度，改善夜间阅读体验，缓解眼睛疲劳。

CSS Media Query：实现夜间模式适配的利器

实现夜间模式适配的一种简单方法是使用CSS Media Query 。Media Query 允许根据设备的特性应用不同的 CSS 样式，包括色调模式。

以下是如何使用 CSS Media Query 为 Android 设备启用夜间模式：

检测设备色调模式：

const prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)');

应用不同的 CSS 样式：

@media (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }

  p {
    color: #ccc;
  }

  a {
    color: #00f;
  }
}

具体案例：将 HTML 富文本内容适配到 Android 的夜间模式

在实际应用中，我们可以使用以下步骤将 HTML 富文本内容适配到 Android 的夜间模式：

加载 HTML 富文本内容到 WebView：

WebView webView = (WebView) findViewById(R.id.webview);
webView.loadDataWithBaseURL(null, htmlContent, "text/html", "UTF-8", null);

应用 CSS 样式：

webView.evaluateJavascript("(function() {" +
    "var prefersDarkMode = window.matchMedia('(prefers-color-scheme: dark)');" +
    "if (prefersDarkMode.matches) {" +
      "document.body.style.backgroundColor = 'black';" +
      "document.body.style.color = 'white';" +
      "document.querySelectorAll('p').forEach(function(p) { p.style.color = '#ccc'; });" +
      "document.querySelectorAll('a').forEach(function(a) { a.style.color = '#00f'; });" +
    "}" +
  "})()", null);