From 0c2dd603b25a63e0b429de3f8bc9a93f3e80e511 Mon Sep 17 00:00:00 2001
From: Jaifroid <egk10@cam.ac.uk>
Date: Sun, 6 Jun 2021 11:03:19 +0100
Subject: [PATCH] Extend auto dark theme to all modern browsers

Former-commit-id: 72725aab0c0cbaaaf4b289bc26f59a99a242fc27 [formerly f7caf4461cc2d75be599ed544c8887e8c952b184] [formerly 66213052f971493cf28fdca267097ce5cf8603f9] [formerly 7cc1e4e89616962748add62beaa1249c26d5cce8 [formerly d12e3886fbe26c2843845b0753d0b944aa49b11c [formerly 3be2996722a7033467d51e439689f27cd1f818a8]]]
Former-commit-id: cb22e9535c0c733372bdde7171ba1770c563e1ac [formerly 247c113f563181fafcc257e7a287927bd2c2abeb [formerly 403a9dcfad7b4de46ab93cb3ca3fdbaeb1c40b4d]]
Former-commit-id: 158ae87f15363a4c97e3bdbb30dbb482f3ac31c0 [formerly 064e7a6b95e1535bf41acba7d994f26a7b25eed6]
Former-commit-id: e058231684f58cdd5ac98089bbddf746ebc58bda
---
 www/index.html | 11 ++++++-----
 www/js/app.js  | 26 +++++++++++++++++++-------
 2 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/www/index.html b/www/index.html
index 06a4b0cb..f66bdff0 100644
--- a/www/index.html
+++ b/www/index.html
@@ -100,13 +100,14 @@
                         </p>
                     </div>
                     <p style="padding-top:10px;">
-                        This application (apart from the PWA version) is packaged with only a sample ZIM archive of the top 100 Wikipedia articles
-                        so that you can get a feel for how offline Wikipedia browsing works. You will need to downloaded an offline ZIM archive and
-                        store it on your device. You can do this from the <b>Configuration page&nbsp;<span class="glyphicon glyphicon-wrench"></span></b>,
+                        This application may be packaged with a sample ZIM archive of the top 100 Wikipedia articles so that you can get a feel for how
+                        offline Wikipedia browsing works. For the full experience you <strong>must download an offline ZIM archive</strong> and store it
+                        on your device! You can do this from the <b>Configuration page&nbsp;<span class="glyphicon glyphicon-wrench"></span></b>,
                         or else see the <b>About page&nbsp;<span class="glyphicon glyphicon-info-sign"></span></b> for more information.
                     </p>
                     <p>
-                        For the full experience you <strong>must</strong> download a ZIM archive and store it on your device! Alternatively, if you only want Wikivoyage or WikiMed in English, look for "Wikivoyage by Kiwix" or "WikiMed" in the Store and install those apps instead.
+                        Alternatively, if you only want Wikivoyage or WikiMed in English, look for "Wikivoyage by Kiwix" or "WikiMed" in the Microsoft Store
+                        (Windows 10) and install those apps instead.
                     </p>
                     <p>
                         Kiwix JS is <b>free</b> and <b>open source</b>. If you like it, please leave a positive review. Constructive feedback and help with
@@ -619,7 +620,7 @@
                                         <label class="checkbox" title="Tap three times for dark | auto | light">
                                             <input type="checkbox" name="cssUIDarkTheme" id="cssUIDarkThemeCheck">
                                             <span class="checkmark"></span>
-                                            <b>Set dark mode for User Interface</b>: [ <b><span id="cssUIDarkThemeState"></span></b> ] (<i>auto</i> mode uses UWP system Settings if available)
+                                            <b>Set dark mode for User Interface</b>: [ <b><span id="cssUIDarkThemeState"></span></b> ] (<i>auto</i> mode uses OS Settings if available)
                                         </label>
                                         <label class="checkbox" title="Tap three times for dark | auto | light">
                                             <input type="checkbox" name="cssWikiDarkTheme" id="cssWikiDarkThemeCheck">
diff --git a/www/js/app.js b/www/js/app.js
index ea82ce82..c168ee61 100644
--- a/www/js/app.js
+++ b/www/js/app.js
@@ -1246,6 +1246,7 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'cache', 'images', 'sett
 
         function initializeUISettings() {
             var checkAuto = params.cssUITheme == 'auto' || params.cssTheme == 'auto';
+            // Support for UWP
             if (checkAuto && typeof Windows !== 'undefined' && Windows.UI && Windows.UI.ViewManagement) {
                 uiSettings = new Windows.UI.ViewManagement.UISettings();
                 uiSettings.oncolorvalueschanged = function () {
@@ -1253,6 +1254,14 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'cache', 'images', 'sett
                     if (params.cssTheme == 'auto') switchCSSTheme();
                 };
             }
+            // Support for other contexts (Firefox, Chromium, Electron, NWJS)
+            if (checkAuto && window.matchMedia('(prefers-color-scheme)').media !== 'not all') {
+                uiSettings = window.matchMedia('(prefers-color-scheme:dark)');
+                uiSettings.onchange = function () {
+                    if (params.cssUITheme == 'auto') cssUIThemeGetOrSet('auto');
+                    if (params.cssTheme == 'auto') switchCSSTheme();
+                };
+            }
         }
         // Code below is needed on startup to show or hide the inverted dark theme checkbox; 
         // similar code also runs in switchCSSTheme(), but that is not evoked on startup
@@ -1300,15 +1309,18 @@ define(['jquery', 'zimArchiveLoader', 'uiUtil', 'util', 'cache', 'images', 'sett
         });
 
         function cssUIThemeGetOrSet(value, getOnly) {
-            if (value == 'auto') {
+            if (value === 'auto') {
+                value = 'light'; // Default that most people expect
                 if (uiSettings) {
                     // We need to check the system theme
-                    // Value 0 below is the 'background' constant in array Windows.UI.ViewManagement.UIColorType
-                    var colour = uiSettings.getColorValue(0);
-                    value = (colour.b + colour.g + colour.r) <= 382 ? 'dark' : 'light';
-                } else {
-                    // There is no system default, so use light, as it is what most people will expect
-                    value = 'light';
+                    if (uiSettings.getColorValue) {
+                        // Value 0 below is the 'background' constant in array Windows.UI.ViewManagement.UIColorType
+                        var colour = uiSettings.getColorValue(0);
+                        value = (colour.b + colour.g + colour.r) <= 382 ? 'dark' : 'light';
+                    } else {
+                        // Generic support for modern browser contexts
+                        value = uiSettings.matches ? 'dark' : 'light';
+                    }
                 }
             }
             if (getOnly) return value;