Android WebView Spellchecker Background Color Issue in Dark Mode - Stack Overflow

admin管理员组

文章数量:1390697

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

Share Improve this question Follow edited Mar 17 at 10:04 Dinesh G asked Mar 14 at 10:05 Dinesh GDinesh G 9299 bronze badges 2

• 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

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

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);

本文标签： Android WebView Spellchecker Background Color Issue in Dark ModeStack Overflow