如何在 android webview 中强制显示暗网页?
How to force dark web pages in android webview?
如果我们启用chrome://flags/#enable-force-dark
在 android 上的 chrome 浏览器中标记然后网页变暗。
我想在 android webview 中实现类似的东西(即暗网 ui)。
目前我正在使用以下代码:
private void injectCSS() {
String code = "javascript:(function() {" +
"var node = document.createElement('style');"+
"node.type = 'text/css';"+
" node.innerHTML = 'body, label,th,p,a, td, tr,li,ul,span,table,h1,h2,h3,h4,h5,h6,h7,div,small {"+
" color: #deFFFFFF;"+
"background-color: #232323;"+
" } ';"+
" document.head.appendChild(node);})();";
webView.evaluateJavascript(code,null);
}
我运行这段代码在:
@Override
public void onProgressChanged(WebView view, final int
newProgress) {
super.onProgressChanged(view, newProgress);
injectCSS();
}
@Override
public void onPageStarted(final WebView view, String url,
Bitmap favicon) {
injectCSS();
super.onPageStarted(view, url, favicon);
}
@Override
public void onPageFinished(WebView view, final String url)
{
injectCSS();
super.onPageFinished(view, url);
}
现在我接近了与 chrome 相同的黑暗网页。但是我想改进这段代码,因为它有一些问题,比如锚链接不能正确显示。建议任何更好的技术(如果可用)
如果您看到 androidx.webkit:webkit:1.3.0-beta01
change logs you could see ForceDark API added to control if WebView
should be rendered in dark mode. You can use ForceDarkStrategy
API 来控制 WebView
变暗(CSS/web 内容变暗与自动变暗)。
事先尝试访问此功能,确保正在使用的 Webview 支持它。为此,WebViewFeature
class have an isFeatureSupported()
函数可用于检查给定功能是否受支持。因此,在我们继续设置对暗模式的支持之前,请检查它是否受支持:
if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) { ... }
WebSettingsCompat
中有 3 个不同的常量可用于配置 -
- FORCE_DARK_OFF – 禁用 webview 的 force dark 模式,这意味着 webview 的内容将按原样呈现
- FORCE_DARK_ON – 为 webview 启用强制暗模式,这意味着 webview 的内容将始终以深色主题呈现
- FORCE_DARK_AUTO – 根据父视图的状态为webview启用force dark mode,意味着渲染时会遵循系统的dark mode设置网页视图的内容。
使用setForceDark
函数相应地应用它-
WebSettingsCompat.setForceDark(webView.settings, WebSettingsCompat.FORCE_DARK_ON)
如果我们启用chrome://flags/#enable-force-dark 在 android 上的 chrome 浏览器中标记然后网页变暗。
我想在 android webview 中实现类似的东西(即暗网 ui)。
目前我正在使用以下代码:
private void injectCSS() {
String code = "javascript:(function() {" +
"var node = document.createElement('style');"+
"node.type = 'text/css';"+
" node.innerHTML = 'body, label,th,p,a, td, tr,li,ul,span,table,h1,h2,h3,h4,h5,h6,h7,div,small {"+
" color: #deFFFFFF;"+
"background-color: #232323;"+
" } ';"+
" document.head.appendChild(node);})();";
webView.evaluateJavascript(code,null);
}
我运行这段代码在:
@Override
public void onProgressChanged(WebView view, final int
newProgress) {
super.onProgressChanged(view, newProgress);
injectCSS();
}
@Override
public void onPageStarted(final WebView view, String url,
Bitmap favicon) {
injectCSS();
super.onPageStarted(view, url, favicon);
}
@Override
public void onPageFinished(WebView view, final String url)
{
injectCSS();
super.onPageFinished(view, url);
}
现在我接近了与 chrome 相同的黑暗网页。但是我想改进这段代码,因为它有一些问题,比如锚链接不能正确显示。建议任何更好的技术(如果可用)
如果您看到 androidx.webkit:webkit:1.3.0-beta01
change logs you could see ForceDark API added to control if WebView
should be rendered in dark mode. You can use ForceDarkStrategy
API 来控制 WebView
变暗(CSS/web 内容变暗与自动变暗)。
事先尝试访问此功能,确保正在使用的 Webview 支持它。为此,WebViewFeature
class have an isFeatureSupported()
函数可用于检查给定功能是否受支持。因此,在我们继续设置对暗模式的支持之前,请检查它是否受支持:
if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) { ... }
WebSettingsCompat
中有 3 个不同的常量可用于配置 -
- FORCE_DARK_OFF – 禁用 webview 的 force dark 模式,这意味着 webview 的内容将按原样呈现
- FORCE_DARK_ON – 为 webview 启用强制暗模式,这意味着 webview 的内容将始终以深色主题呈现
- FORCE_DARK_AUTO – 根据父视图的状态为webview启用force dark mode,意味着渲染时会遵循系统的dark mode设置网页视图的内容。
使用setForceDark
函数相应地应用它-
WebSettingsCompat.setForceDark(webView.settings, WebSettingsCompat.FORCE_DARK_ON)