I’m facing an issue with the spellchecker (text suggestions) in Android WebView when using dark mode.

• In light theme, the spellchecker popup has a white background with black text, which is correct.
• In dark theme, the spellchecker background remains white, but the text is also white, making it unreadable.

Help me to fix this issue!!

In Dark Mode:

In Light Mode

I’m facing an issue with the spellchecker (text suggestions) in Android WebView when using dark mode.

• In light theme, the spellchecker popup has a white background with black text, which is correct.
• In dark theme, the spellchecker background remains white, but the text is also white, making it unreadable.

Help me to fix this issue!!

In Dark Mode:

In Light Mode

• android
• webview
• android-theme
• darkmode

• Please provide more information to help us understand your issue. A screenshot and the version of the webview(or webkit) are required. – cmoaciopm Commented Mar 14 at 13:43
• I've updated with the screenshot of the issue @cmoaciopm – Dinesh G Commented Mar 17 at 10:05

1 Answer 1

1. Force Dark Mode on WebView
Ensure that your WebView is properly set up to support dark mode:

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
    webView.getSettings().setForceDark(WebSettings.FORCE_DARK_ON);
}

This should help WebView elements adapt to dark mode correctly.

2. Override WebView's Default Styling

Since the spellchecker popup is part of the WebView, you can try injecting custom CSS to override the default styles:

::selection {
    background: #555; /* Adjust color */
    color: white;
}

Use JavaScript to inject it dynamically:

webView.evaluateJavascript(
    "document.addEventListener('DOMContentLoaded', function() {" +
    "   let style = document.createElement('style');" +
    "   style.innerHTML = '::selection { background: #555; color: white; }';" +
    "   document.head.appendChild(style);" +
    "});",
    null
);

3. Set the System Theme Properly
Ensure your app follows the system theme correctly:

<application
    android:theme="@style/Theme.AppCompat.DayNight">

Then, in onCreate:

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_FOLLOW_SYSTEM);