From 3bda61ca89bdc6427d549efd4e0842e580217338 Mon Sep 17 00:00:00 2001
From: Skylar Ittner <skylar@netsyms.com>
Date: Tue, 14 Apr 2020 11:24:34 -0600
Subject: [PATCH] Add automatic theme detection, change setting "darktheme" to
 "apptheme", close #48

---
 www/assets/css/app.css    |  8 ++++++++
 www/assets/js/main.js     | 19 +++++++++++++++++--
 www/assets/js/settings.js |  7 +++----
 www/assets/js/sync.js     |  8 ++------
 www/routes.js             | 26 ++++++++++++++++++++------
 5 files changed, 50 insertions(+), 18 deletions(-)

diff --git a/www/assets/css/app.css b/www/assets/css/app.css
index 08d4b68..40d48a2 100644
--- a/www/assets/css/app.css
+++ b/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.
 */
diff --git a/www/assets/js/main.js b/www/assets/js/main.js
index 26b1e5f..5eb0a79 100644
--- a/www/assets/js/main.js
+++ b/www/assets/js/main.js
@@ -100,8 +100,23 @@ if (getStorage("alertvolume") == null) {
     setStorage("alertvolume", 100);
 }
 
-if (getStorage("darktheme") == "true") {
-    $("#app").addClass("theme-dark");
+function applyColorTheme() {
+    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");
\ No newline at end of file
diff --git a/www/assets/js/settings.js b/www/assets/js/settings.js
index b58f206..4ada46a 100644
--- a/www/assets/js/settings.js
+++ b/www/assets/js/settings.js
@@ -43,11 +43,10 @@ function clearCaches() {
     }
 }
 
-$('.item-content[data-setting=darktheme] .toggle input').on("change", function () {
-    var checked = $(this).prop('checked');
-    setStorage("darktheme", checked);
+$('.item-link[data-setting=apptheme] select').on("change", function () {
+    setStorage("apptheme", $('.item-link[data-setting=apptheme] select').val());
 
-    loadSettings();
+    applyColorTheme();
 });
 
 $('.item-content[data-setting=showhelp] .toggle input').on("change", function () {
diff --git a/www/assets/js/sync.js b/www/assets/js/sync.js
index e52c445..85ef46d 100644
--- a/www/assets/js/sync.js
+++ b/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") {
-        $("#app").addClass("theme-dark");
-    } else {
-        $("#app").removeClass("theme-dark");
-    }
+    applyColorTheme();
 
     if (platform_type == "cordova") {
         if (getStorage("wakelock") == "true") {
diff --git a/www/routes.js b/www/routes.js
index a8285a3..435ff7a 100644
--- a/www/routes.js
+++ b/www/routes.js
@@ -726,12 +726,26 @@ var routes = [
                 async: function (routeTo, routeFrom, resolve, reject) {
                     var settings = [
                         {
-                            setting: "darktheme",
-                            title: "Use dark theme",
-                            text: "Saves power on phones with OLED screens.",
-                            toggle: true,
-                            checked: getStorage("darktheme") == "true",
-                            onclick: ""
+                            setting: "apptheme",
+                            title: "Color theme",
+                            select: true,
+                            options: [
+                                {
+                                    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",