Merge pull request #155 from gcoleman799/custom-dark-theme

gcoleman799 · web-flow · commit 35b902d91651 · 2020-07-28T11:51:22.000-04:00
Custom dark theme
diff --git a/WebView/app/src/main/AndroidManifest.xml b/WebView/app/src/main/AndroidManifest.xml
@@ -25,7 +25,7 @@
         android:label="@string/app_name"
         android:roundIcon="@mipmap/ic_launcher_round"
         android:supportsRtl="true"
-        android:theme="@style/AppTheme">
+        android:theme="@style/Theme.MyApp">
         <activity android:name=".MainActivity">
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />
diff --git a/WebView/app/src/main/assets/index.html b/WebView/app/src/main/assets/index.html
@@ -16,8 +16,9 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <link href="app.css" rel="stylesheet">
     <script async src="main.js"></script>
+    <meta name="color-scheme" content="dark light">
+    <link rel="stylesheet" href="style.css">
   </head>
   <body onload="getData()">
     <label for="location">Choose a location:</label>
diff --git a/WebView/app/src/main/assets/style.css b/WebView/app/src/main/assets/style.css
@@ -14,46 +14,40 @@
  * limitations under the License.
  */
 body {
-  background-color: light-blue;
+  background-color: white;
 }
-h1 {
-  color: white;
+h1, h2 {
   text-align: center;
-}
-h2 {
-  color: grey;
+  color: black;
   text-align: center;
 }
 p {
   font-family: verdana;
   font-size: 20px;
 }
 label {
-    font-family: verdana;
-    font-size: 20px;
+  font-family: verdana;
+  font-size: 20px;
 }
 img {
   border-radius: 4px;
   padding: 5px;
 }
 .button {
+  color: black;
+  background-color:#03DAC6;
   font-family: verdana;
-  background-color:#44c767;
   border-radius:8px;
-  border:1px solid #18ab29;
+  border:1px solid #03DAC6;
   display:inline-block;
   cursor:pointer;
-  color:#ffffff;
   font-size:18px;
   padding:16px 31px;
   text-decoration:none;
   text-shadow:0px 1px 0px #2f6627;
   margin-left: 27%;
   margin-top: 5%;
 }
-.button:hover {
-  background-color:#42b007;
-}
 .button:active {
   position:relative;
   top:1px;
@@ -91,4 +85,17 @@ img {
   padding-top: 20%;
   padding-left: 5%;
   padding-right: 5%;
+}
+@media (prefers-color-scheme: dark) {
+  body {
+    background: #383838;
+  }
+  h1, h2 {
+    color: white;
+  }
+  select {
+    color: white;
+    background-color: #1f1f1f;
+    border-color: #121212;
+  }
 }
diff --git a/WebView/app/src/main/java/com/android/samples/webviewdemo/MainActivity.kt b/WebView/app/src/main/java/com/android/samples/webviewdemo/MainActivity.kt
@@ -33,6 +33,7 @@ import androidx.core.content.ContextCompat.startActivity
 import androidx.webkit.JavaScriptReplyProxy
 import androidx.webkit.WebMessageCompat
 import androidx.webkit.WebSettingsCompat
+import androidx.webkit.WebSettingsCompat.DARK_STRATEGY_PREFER_WEB_THEME_OVER_USER_AGENT_DARKENING
 import androidx.webkit.WebViewAssetLoader
 import androidx.webkit.WebViewClientCompat
 import androidx.webkit.WebViewCompat
@@ -129,9 +130,16 @@ class MainActivity : AppCompatActivity() {
         setContentView(binding.root)
         val jsObjName = "jsObject"
         val allowedOriginRules = setOf<String>("https://gcoleman799.github.io")
-
-        // Check if the system is set to light or dark mode
+        
+        // Configuring Dark Theme
+        // *NOTE* : The force dark setting is not persistent. You must call the static
+        // method every time your app process is started.
+        // *NOTE* : The change from day<->night mode is a
+        // configuration change so by default the activity will be restarted
+        // (and pickup the new values to apply the theme). Take care when overriding this
+        //  default behavior to ensure this method is still called when changes are made.
         val nightModeFlag = resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK
+        // Check if the system is set to light or dark mode
         if (nightModeFlag == Configuration.UI_MODE_NIGHT_YES) {
             // Switch WebView to dark mode; uses default dark theme
             if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK)) {
@@ -140,11 +148,28 @@ class MainActivity : AppCompatActivity() {
                     WebSettingsCompat.FORCE_DARK_ON
                 )
             }
-            // TODO: set darkening strategy and use custom CSS for dark theme
+
+            /* Set how WebView content should be darkened. There are three options for how to darken
+             * a WebView.
+             * PREFER_WEB_THEME_OVER_USER_AGENT_DARKENING- checks for the "color-scheme" <meta> tag.
+             * If present, it uses media queries. If absent, it applies user-agent (automatic) darkening
+             * DARK_STRATEGY_WEB_THEME_DARKENING_ONLY - uses media queries always, even if there's
+             * no "color-scheme" <meta> tag present.
+             * DARK_STRATEGY_USER_AGENT_DARKENING_ONLY - it ignores web page theme and always applies
+             * user-agent (automatic) darkening.
+             * More information about Force Dark Strategy can be found here:
+             * https://developer.android.com/reference/androidx/webkit/WebSettingsCompat#setForceDarkStrategy(android.webkit.WebSettings,%20int)
+             */
+            if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK_STRATEGY)) {
+                WebSettingsCompat.setForceDarkStrategy(
+                    binding.webview.settings,
+                    DARK_STRATEGY_PREFER_WEB_THEME_OVER_USER_AGENT_DARKENING
+                )
+            }
         }
 
         // Configure asset loader with custom domain
-        // * NOTE THAT *:
+        // *NOTE* :
         // The assets path handler is set with the sub path /views-widgets-samples/ here because we are tyring to ensure
         // that the address loaded with loadUrl("https://raw.githubusercontent.com/views-widgets-samples/assets/index.html") does
         // not conflict with a real web address. In this case, if the path were only /assests/ we would need to load
@@ -153,8 +178,14 @@ class MainActivity : AppCompatActivity() {
         // Therefore we must let the AssetLoader know to expect the /views-widgets-samples/ sub path as well as the /assets/.
         val assetLoader = WebViewAssetLoader.Builder()
             .setDomain("raw.githubusercontent.com")
-            .addPathHandler("/views-widgets-samples/assets/", WebViewAssetLoader.AssetsPathHandler(this))
-            .addPathHandler("/views-widgets-samples/res/", WebViewAssetLoader.ResourcesPathHandler(this))
+            .addPathHandler(
+                "/views-widgets-samples/assets/",
+                WebViewAssetLoader.AssetsPathHandler(this)
+            )
+            .addPathHandler(
+                "/views-widgets-samples/res/",
+                WebViewAssetLoader.ResourcesPathHandler(this)
+            )
             .build()
 
         // Set clients
@@ -182,6 +213,5 @@ class MainActivity : AppCompatActivity() {
         ) { message -> invokeShareIntent(message) }
 
         // Load the content
-        binding.webview.loadUrl("https://raw.githubusercontent.com/views-widgets-samples/assets/index.html")
-    }
+        binding.webview.loadUrl("https://raw.githubusercontent.com/views-widgets-samples/assets/index.html")    }
 }
diff --git a/WebView/app/src/main/res/values-night/colors.xml b/WebView/app/src/main/res/values-night/colors.xml
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  ~ Copyright (C) 2020 The Android Open Source Project
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~      http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<resources>
+    <color name="colorPrimary">#3700B3</color>
+    <color name="colorPrimaryDark">#BB86FC</color>
+    <color name="colorAccent">#03DAC5</color>
+</resources>
diff --git a/WebView/app/src/main/res/values/styles.xml b/WebView/app/src/main/res/values/styles.xml
@@ -17,7 +17,7 @@
 <resources>
 
     <!-- Base application theme. -->
-    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
+    <style name="Theme.MyApp" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
         <!-- Customize your theme here. -->
         <item name="colorPrimary">@color/colorPrimary</item>
         <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
