Night Mode System Settings on Android client.

react/public/index.html

@@ -6,6 +6,7 @@
   <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#000000" />
+  <meta name="color-scheme" content="dark light"/> <!-- uses media queries in web views. -->
     <meta name="description" content="PiPedal Guitar Pedals" />
   <!--
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
@@ -42,19 +43,39 @@
   <script>
     const androidHosted = !!(window.AndroidHost);
 
+    var colorScheme = localStorage.getItem("colorScheme");
+    if (androidHosted)
+    {
+       var hostColorScheme  = window.AndroidHost.getThemePreference();
+       switch (hostColorScheme)
+       {
+        case 0: 
+          colorScheme = "Light";
+          break;
+        case 1:
+          colorScheme = "Dark";
+          break;
+        case 2:
+          {
+            // use the host's interpretation of the current system night mode.
+            colorScheme = window.AndroidHost.isDarkTheme() ? "Dark": "Light";
+          }
+          break;
+       }
+    }
+    if (!colorScheme)
+    {
+      colorScheme = "Dark";
+    }
     var darkMode = false;
     var useSystem = false;
 
     var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
 
-    switch (localStorage.getItem("colorScheme")) {
+    switch (colorScheme) {
       case null:
       default:
-        if (androidHosted) {
-          useSystem = true;
-        } else {
         darkMode = false;
-        }
         break;
 
       case "Light":
@@ -68,7 +89,7 @@
         break;
     }
     if (useSystem) {
-      darkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+      darkMode = prefersDark;
     }
 
     if (!darkMode) {

react/src/AndroidHost.tsx

@@ -31,6 +31,7 @@ export interface  AndroidHostInterface {
     launchExternalUrl(url:string): boolean;
     setThemePreference(theme: number): void;
     getThemePreference(): number;
+    isDarkTheme?: ()=> boolean;
 };
 
 export class FakeAndroidHost implements AndroidHostInterface
@@ -43,6 +44,9 @@ export class FakeAndroidHost implements AndroidHostInterface
     }
     chooseNewDevice(): void {
         
+    }
+    isDarkTheme(): boolean {
+        return true;
     }
     setDisconnected(isDisconnected: boolean): void {
         

react/src/DarkMode.tsx

@@ -17,7 +17,7 @@
 // IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 // CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 
-import { AndroidHostInterface } from "./AndroidHost";
+import { AndroidHostInterface, getAndroidHost } from "./AndroidHost";
 
 export enum ColorTheme {
     Light,
@@ -25,7 +25,16 @@ export enum ColorTheme {
     System
 };
 
+export function getEffectiveColorScheme(): ColorTheme {
+    let androidHost = (window as any).AndroidHost as AndroidHostInterface;
+    if (androidHost) {
+        if (androidHost.isDarkTheme)
+            return androidHost.isDarkTheme() ? ColorTheme.Dark: ColorTheme.Light;
+        return ColorTheme.Dark;
+    }
+    return getColorScheme();
     
+}
 
 export function getColorScheme(): ColorTheme {
     let androidHost = (window as any).AndroidHost as AndroidHostInterface;
@@ -85,13 +94,28 @@ export function setColorScheme(value: ColorTheme): void {
     localStorage.setItem("colorScheme", storageValue);
 }
 
+var gIsDarkTheme: boolean| undefined = undefined;
+
 export function isDarkMode(): boolean {
+    if (gIsDarkTheme !== undefined)
+    {
+        return gIsDarkTheme;
+    }
     var colorTheme = getColorScheme();
     if (colorTheme === ColorTheme.System) {
+        let androidHost = getAndroidHost();
+        if (androidHost)
+        {
+            if (androidHost.isDarkTheme)
+            {
+                return gIsDarkTheme = androidHost.isDarkTheme();
+            }
+            return gIsDarkTheme = true;
+        }
         if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-            return true;
+            return gIsDarkTheme = true;
         }
     }
-    return colorTheme === ColorTheme.Dark;
+    return gIsDarkTheme = (colorTheme === ColorTheme.Dark);
 }