Темный режим завоевал огромную популярность среди пользователей благодаря своим функциям, которые удобны для глаз и позволяют экономить заряд батареи. Если вы разрабатываете приложение для Android с компонентом WebView, поддержка темного режима может улучшить взаимодействие с пользователем. В этой статье мы рассмотрим различные методы реализации темного режима в Android WebView и приведем примеры кода.

Метод 1: использование медиазапросов CSS
Один из способов включить темный режим в WebView — использование медиазапросов CSS. Вы можете установить определенные стили для элементов, когда устройство пользователя находится в темном режиме. Вот пример:

WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
webSettings.setSupportZoom(false);
webSettings.setDomStorageEnabled(true);
webSettings.setAppCacheEnabled(true);
webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            view.evaluateJavascript(
                "(function() { " +
                "   var element = document.body; " +
                "   if (window.matchMedia('(prefers-color-scheme: dark)').matches) { " +
                "       element.style.backgroundColor = '#000000'; " +
                "       element.style.color = '#FFFFFF'; " +
                "   } " +
                "})();",
                null
            );
        }
    }
});
webView.loadUrl("https://example.com");

Метод 2: внедрение JavaScript
Другой подход заключается во внедрении кода JavaScript в WebView для применения стилей темного режима. Вот пример:

webView.getSettings().setJavaScriptEnabled(true);
webView.setWebViewClient(new WebViewClient() {
    public void onPageFinished(WebView view, String url) {
        view.evaluateJavascript(
            "(function() { " +
            "   var element = document.body; " +
            "   if (window.matchMedia('(prefers-color-scheme: dark)').matches) { " +
            "       element.style.backgroundColor = '#000000'; " +
            "       element.style.color = '#FFFFFF'; " +
            "   } " +
            "})();",
            null
        );
    }
});
webView.loadUrl("https://example.com");

Метод 3: подход на основе тем
Вы также можете использовать подход на основе тем, чтобы включить темный режим в WebView. Сначала определите тему в файле styles.xml:

<style name="DarkWebViewTheme" parent="android:Theme">
    <item name="android:background">#000000</item>
    <item name="android:textColor">#FFFFFF</item>
</style>

Затем примените тему к WebView:

webView = new WebView(context, null, 0, R.style.DarkWebViewTheme);

В этой статье мы рассмотрели три различных метода реализации темного режима в Android WebView. Вы можете выбрать подход, который лучше всего соответствует вашим требованиям, и интегрировать его в свое приложение, чтобы предоставить пользователям визуально привлекательный интерфейс. Темный режим не только улучшает внешний вид, но и помогает продлить срок службы батареи. Следуя приведенным примерам кода, вы можете легко реализовать темный режим в своем приложении Android на основе WebView.

Включив темный режим в свое приложение, вы сможете идти в ногу с последними тенденциями дизайна и предложить удобный пользовательский интерфейс. Так что не бойтесь экспериментировать и выделите свое приложение с помощью этой востребованной функции.