Merge pull request #124 from KevinnZou/feature/dark_mode_support

KevinnZou · web-flow · commit b718acbd19cf · 2024-03-26T10:30:13.000+08:00
Feature/dark mode support
diff --git a/sample/shared/src/commonMain/kotlin/com/kevinnzou/sample/WebViewApp.kt b/sample/shared/src/commonMain/kotlin/com/kevinnzou/sample/WebViewApp.kt
@@ -12,8 +12,8 @@ import com.multiplatform.webview.web.rememberWebViewState
 @Composable
 internal fun WebViewApp() {
 //    WebViewSample()
-    BasicWebViewSample()
-//    BasicWebViewWithHTMLSample()
+//    BasicWebViewSample()
+    BasicWebViewWithHTMLSample()
 }
 
 @Composable
diff --git a/sample/shared/src/commonMain/kotlin/com/kevinnzou/sample/res/HtmlRes.kt b/sample/shared/src/commonMain/kotlin/com/kevinnzou/sample/res/HtmlRes.kt
@@ -20,6 +20,14 @@ object HtmlRes {
                     text-align: center; 
                     color: ffffff; 
                 }
+                @media (prefers-color-scheme: dark) {
+                  body {
+                    background-color: white;
+                  }
+                  h1, h2 {
+                    color: black; 
+                  }
+                }
             </style>
         </head>
         <body>
diff --git a/webview/build.gradle.kts b/webview/build.gradle.kts
@@ -51,6 +51,7 @@ kotlin {
             dependencies {
                 api("androidx.activity:activity-compose:1.7.2")
                 api("androidx.webkit:webkit:1.8.0")
+                implementation("androidx.webkit:webkit:1.9.0")
                 implementation("org.jetbrains.kotlinx:kotlinx-coroutines-android:$coroutines")
             }
         }
diff --git a/webview/src/androidMain/kotlin/com/multiplatform/webview/web/AccompanistWebView.kt b/webview/src/androidMain/kotlin/com/multiplatform/webview/web/AccompanistWebView.kt
@@ -1,6 +1,7 @@
 package com.multiplatform.webview.web
 
 import android.content.Context
+import android.content.res.Configuration
 import android.graphics.Bitmap
 import android.os.Build
 import android.view.ViewGroup
@@ -18,6 +19,8 @@ import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.viewinterop.AndroidView
+import androidx.webkit.WebSettingsCompat
+import androidx.webkit.WebViewFeature
 import com.multiplatform.webview.jsbridge.WebViewJsBridge
 import com.multiplatform.webview.util.KLogger
 
@@ -198,6 +201,19 @@ fun AccompanistWebView(
                         domStorageEnabled = it.domStorageEnabled
                     }
                 }
+                if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) {
+                    val nightModeFlags = resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK
+                    if (nightModeFlags == Configuration.UI_MODE_NIGHT_YES) {
+                        WebSettingsCompat.setForceDark(this.settings, WebSettingsCompat.FORCE_DARK_ON)
+                    } else {
+                        WebSettingsCompat.setForceDark(this.settings, WebSettingsCompat.FORCE_DARK_OFF)
+                    }
+
+                    WebSettingsCompat.setForceDarkStrategy(
+                        this.settings,
+                        WebSettingsCompat.DARK_STRATEGY_WEB_THEME_DARKENING_ONLY,
+                    )
+                }
             }.also {
                 val androidWebView = AndroidWebView(it, scope, webViewJsBridge)
                 state.webView = androidWebView

Original file line number	Diff line number	Diff line change
`@@ -51,6 +51,7 @@ kotlin {`
`51`	`51`	`dependencies {`
`52`	`52`	`api("androidx.activity:activity-compose:1.7.2")`
`53`	`53`	`api("androidx.webkit:webkit:1.8.0")`
	`54`	`+ implementation("androidx.webkit:webkit:1.9.0")`
`54`	`55`	`implementation("org.jetbrains.kotlinx:kotlinx-coroutines-android:$coroutines")`
`55`	`56`	`}`
`56`	`57`	`}`