Add automatic theme detection, change setting "darktheme" to "apptheme", close #48

www/assets/css/app.css

@@ -63,6 +63,14 @@ Framework7 and FontAwesome both have a .fab class
     pointer-events: none;
 }
 
+.no-animation * {
+    -webkit-transition: 10ms !important;
+    -moz-transition: 10ms !important;
+    -o-transition: 10ms !important;
+    -ms-transition: 10ms !important;
+    transition: 10ms !important;
+}
+
 /*
  Allow easily changing help text to reflect finger/mouse usage.
 */

www/assets/js/main.js

@@ -100,8 +100,23 @@ if (getStorage("alertvolume") == null) {
     setStorage("alertvolume", 100);
 }
 
-if (getStorage("darktheme") == "true") {
+function applyColorTheme() {
-    $("#app").addClass("theme-dark");
+    if (getStorage("apptheme") == "dark") {
+        // dark theme
+        $("#app").addClass("theme-dark");
+    } else if (getStorage("apptheme") == "light") {
+        // light theme
+        $("#app").removeClass("theme-dark");
+    } else {
+        // automatic theme, default light
+        if (typeof Framework7.device.prefersColorScheme() !== 'undefined' && Framework7.device.prefersColorScheme() == "dark") {
+            $("#app").addClass("theme-dark");
+        } else {
+            $("#app").removeClass("theme-dark");
+        }
+    }
 }
 
+applyColorTheme();
+
 router.navigate("/home");

www/assets/js/settings.js

@@ -43,11 +43,10 @@ function clearCaches() {
     }
 }
 
-$('.item-content[data-setting=darktheme] .toggle input').on("change", function () {
+$('.item-link[data-setting=apptheme] select').on("change", function () {
-    var checked = $(this).prop('checked');
+    setStorage("apptheme", $('.item-link[data-setting=apptheme] select').val());
-    setStorage("darktheme", checked);
 
-    loadSettings();
+    applyColorTheme();
 });
 
 $('.item-content[data-setting=showhelp] .toggle input').on("change", function () {

www/assets/js/sync.js

@@ -1,4 +1,4 @@
-/* 
+/*
  * This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
@@ -84,11 +84,7 @@ function syncNow(callback) {
 }
 
 function loadSettings() {
-    if (getStorage("darktheme") == "true") {
+    applyColorTheme();
-        $("#app").addClass("theme-dark");
-    } else {
-        $("#app").removeClass("theme-dark");
-    }
 
     if (platform_type == "cordova") {
         if (getStorage("wakelock") == "true") {

www/routes.js

@@ -726,12 +726,26 @@ var routes = [
                 async: function (routeTo, routeFrom, resolve, reject) {
                     var settings = [
                         {
-                            setting: "darktheme",
+                            setting: "apptheme",
-                            title: "Use dark theme",
+                            title: "Color theme",
-                            text: "Saves power on phones with OLED screens.",
+                            select: true,
-                            toggle: true,
+                            options: [
-                            checked: getStorage("darktheme") == "true",
+                                {
-                            onclick: ""
+                                    value: "auto",
+                                    label: "Automatic",
+                                    selected: getStorage("apptheme") == null || getStorage("apptheme") == "auto"
+                                },
+                                {
+                                    value: "dark",
+                                    label: "Dark",
+                                    selected: getStorage("apptheme") == "dark"
+                                },
+                                {
+                                    value: "light",
+                                    label: "Light",
+                                    selected: getStorage("apptheme") == "light"
+                                }
+                            ]
                         },
                         {
                             setting: "showhelp",