How to set darkmode in webview using jetpack compose? - android-webview

Question

I try to enable dark mode on webview, which is not working, and also setForceDark is deprecated.
I am looking solution to enable dark mode on web view using jetpack compose
package com.blogspot.boltuix
import android.annotation.SuppressLint
import android.content.res.Configuration
import android.os.Bundle
import android.view.ViewGroup
import android.webkit.WebView
import android.webkit.WebViewClient
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.runtime.Composable
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.viewinterop.AndroidView
import androidx.webkit.WebSettingsCompat
import androidx.webkit.WebViewFeature
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
WebViewPage("https://www.boltuix.com/")
}
}
}
#SuppressLint("SetJavaScriptEnabled")
#Composable
fun WebViewPage(url: String){
val context = LocalContext.current
//The Configuration object represents all of the current configurations, not just the ones that have changed.
val configuration = LocalConfiguration.current
when (configuration.orientation) {
Configuration.ORIENTATION_LANDSCAPE -> {
Toast.makeText(context, "landscape", Toast.LENGTH_SHORT).show()
}
else -> {
Toast.makeText(context, "portrait", Toast.LENGTH_SHORT).show()
}
}
// Adding a WebView inside AndroidView
// with layout as full screen
AndroidView(factory = {
WebView(it).apply {
layoutParams = ViewGroup.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT,
ViewGroup.LayoutParams.MATCH_PARENT
)
webViewClient = WebViewClient()
// to play video on a web view
settings.javaScriptEnabled = true
// to verify that the client requesting your web page is actually your Android app.
settings.userAgentString = System.getProperty("http.agent") //Dalvik/2.1.0 (Linux; U; Android 11; M2012K11I Build/RKQ1.201112.002)
// feature 1 : dark mode (auto system setup)
if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) {
WebSettingsCompat.setForceDark(settings, WebSettingsCompat.FORCE_DARK_ON)
}
loadUrl(url)
}
}, update = {
it.loadUrl(url)
})
}
App-level Gradle file:
plugins {
id 'com.android.application'
id 'org.jetbrains.kotlin.android'
}
android {
namespace 'com.blogspot.boltuix'
compileSdk 33
defaultConfig {
applicationId "com.blogspot.boltuix"
minSdk 24
targetSdk 33
versionCode 1
versionName "1.0"
testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
vectorDrawables {
useSupportLibrary true
}
}
buildTypes {
release {
minifyEnabled false
proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
}
}
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
kotlinOptions {
jvmTarget = '1.8'
}
buildFeatures {
compose true
}
composeOptions {
kotlinCompilerExtensionVersion '1.2.0-beta01'
}
packagingOptions {
resources {
excludes += '/META-INF/{AL2.0,LGPL2.1}'
}
}
}
dependencies {
implementation 'androidx.core:core-ktx:1.8.0'
implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.5.0'
implementation 'androidx.activity:activity-compose:1.5.0'
implementation "androidx.compose.ui:ui:1.3.0-alpha01"
implementation "androidx.compose.ui:ui-tooling-preview:1.3.0-alpha01"
implementation 'androidx.compose.material3:material3:1.0.0-alpha14'
testImplementation 'junit:junit:4.13.2'
implementation "androidx.webkit:webkit:1.5.0-beta01"
androidTestImplementation 'androidx.test.ext:junit:1.1.3'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.4.0'
androidTestImplementation "androidx.compose.ui:ui-test-junit4:1.3.0-alpha01"
debugImplementation "androidx.compose.ui:ui-tooling:1.3.0-alpha01"
debugImplementation "androidx.compose.ui:ui-test-manifest:1.3.0-alpha01"
}
I tested OS 11 and 13 - WEB VIEW is working, but not changing dark mode.

Answer 1

This is what I did...
Added this dependency in build.gradle.
implementation "androidx.webkit:webkit:$webkitVersion"
Declare the object below. It is responsible to provide the correct Configuration object in according to the Dark Mode.
object ConfigurationUtil {
fun getConfiguration(context: Context): Configuration {
/**
* issue tracker : https://issuetracker.google.com/issues/170328697
* Web view resets uiMode (Day/Night) in Configuration
*/
val configuration = context.resources.configuration
val configurationNighMode = configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK
val appCompatNightMode = AppCompatDelegate.getDefaultNightMode()
val newUiModeConfiguration = when {
configurationNighMode == Configuration.UI_MODE_NIGHT_NO && appCompatNightMode == UiModeManager.MODE_NIGHT_YES -> {
Configuration.UI_MODE_NIGHT_YES or (configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK.inv())
}
configurationNighMode == Configuration.UI_MODE_NIGHT_YES && appCompatNightMode == UiModeManager.MODE_NIGHT_NO -> {
Configuration.UI_MODE_NIGHT_NO or (configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK.inv())
}
else -> null
}
if (newUiModeConfiguration != null) {
val fixedConfiguration = Configuration().apply {
configuration.uiMode = newUiModeConfiguration
}
context.createConfigurationContext(fixedConfiguration)
}
return configuration
}
}
Use the WebView inside of an AndroidView....
#Composable
fun WebViewScreen() {
AndroidView(
modifier = Modifier
.fillMaxSize()
.padding(16.dp),
factory = { context ->
object : WebView(context) {
init {
val assetLoader = WebViewAssetLoader.Builder()
.addPathHandler("/res/", WebViewAssetLoader.ResourcesPathHandler(context))
.build()
webChromeClient = WebChromeClient()
webViewClient = object : WebViewClient() {
override fun shouldOverrideUrlLoading(
view: WebView,
request: WebResourceRequest
): Boolean {
return false
}
override fun shouldInterceptRequest(
view: WebView,
request: WebResourceRequest
): WebResourceResponse? {
return assetLoader.shouldInterceptRequest(request.url)
}
}
setBackgroundColor(0)
val configuration = ConfigurationUtil.getConfiguration(context)
if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) {
when (configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK) {
Configuration.UI_MODE_NIGHT_YES -> {
WebSettingsCompat.setForceDark(
settings,
WebSettingsCompat.FORCE_DARK_ON
)
}
Configuration.UI_MODE_NIGHT_NO, Configuration.UI_MODE_NIGHT_UNDEFINED -> {
WebSettingsCompat.setForceDark(
settings,
WebSettingsCompat.FORCE_DARK_OFF
)
}
else -> {
WebSettingsCompat.setForceDark(
settings,
WebSettingsCompat.FORCE_DARK_AUTO
)
}
}
}
settings.allowFileAccess = false
settings.allowContentAccess = false
setDownloadListener { url, _, _, _, _ ->
url?.let {
try {
context.startActivity(
Intent(Intent.ACTION_VIEW).apply {
data = Uri.parse(it)
}
)
} catch (e: Exception) {
Toast.makeText(context, "Error opening link", Toast.LENGTH_LONG)
.show()
}
}
}
loadDataWithBaseURL(
ResourceBaseUrl,
"This is a web view. Check if it is working on Dark Mode",
"text/html",
"UTF-8",
null
)
}
}
}
)
}