From b0ef570cd0c2cb325eb4d85afa20184423d2791a Mon Sep 17 00:00:00 2001
From: Skylar Ittner <skylar@netsyms.com>
Date: Sun, 16 Aug 2020 17:32:57 -0600
Subject: [PATCH] Add OLED burn-in protection theme (makes some high-contrast
 stuff dark at cost of readability)

---
 www/assets/css/oled.css | 35 +++++++++++++++++++++++++++++++----
 www/assets/js/main.js   | 10 +++++++++-
 www/routes.js           |  7 ++++++-
 3 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/www/assets/css/oled.css b/www/assets/css/oled.css
index f24fcb8..174c467 100644
--- a/www/assets/css/oled.css
+++ b/www/assets/css/oled.css
@@ -9,8 +9,35 @@
  */
 
 :root #app.theme-dark {
-    --f7-page-bg-color: #020202;
-    --f7-list-bg-color: #020202;
-    --f7-popover-bg-color: #020202;
-    --f7-sheet-bg-color: #020202;
+    --f7-page-bg-color: #111;
+    --f7-list-bg-color: #111;
+    --f7-popover-bg-color: #111;
+    --f7-sheet-bg-color: #111;
+}
+
+#app.oled-burn-in .navbar .navbar-inner .title {
+    color: rgba(255,255,255,0.3);
+}
+
+#app.oled-burn-in .navbar .link {
+    color: rgba(100,100,255,0.5);
+}
+
+#app.oled-burn-in .navbar .link.text-color-red {
+    color: rgba(255,100,100,0.3) !important;
+}
+
+#app.oled-burn-in .mapboxgl-ctrl-group {
+    background: #222;
+}
+
+#app.oled-burn-in .mapboxgl-ctrl-group .mapboxgl-ctrl-icon {
+    filter: invert(69%) sepia(0%) saturate(28%) hue-rotate(215deg) brightness(88%) contrast(91%);
+}
+
+#app.oled-burn-in .mapboxgl-ctrl-scale {
+    background-color: #222;
+    color: #ccc;
+    border: 2px solid #333;
+    border-top: none;
 }
\ No newline at end of file
diff --git a/www/assets/js/main.js b/www/assets/js/main.js
index 8cda0d6..e501fa7 100644
--- a/www/assets/js/main.js
+++ b/www/assets/js/main.js
@@ -108,13 +108,19 @@ function setAppTheme(theme) {
             StatusBar.styleDefault();
             StatusBar.backgroundColorByHexString("#E0E0E0");
         }
-    } else if (theme == "dark") {
+    } else if (theme == "dark" || theme == "oleddark") {
         $("#app").addClass("theme-dark");
         if (platform_type == "cordova" && cordova.platformId == 'android' && typeof StatusBar !== 'undefined') {
             StatusBar.styleLightContent();
             StatusBar.backgroundColorByHexString("#000000");
         }
     }
+
+    if (theme == "oleddark") {
+        $("#app").addClass("oled-burn-in");
+    } else {
+        $("#app").removeClass("oled-burn-in");
+    }
 }
 
 function applyColorTheme() {
@@ -122,6 +128,8 @@ function applyColorTheme() {
         setAppTheme("dark");
     } else if (getStorage("apptheme") == "light") {
         setAppTheme("light");
+    } else if (getStorage("apptheme") == "oleddark") {
+        setAppTheme("oleddark");
     } else {
         // automatic theme, default light
         if (typeof Framework7.device.prefersColorScheme() !== 'undefined' && Framework7.device.prefersColorScheme() == "dark") {
diff --git a/www/routes.js b/www/routes.js
index e079615..81ef30a 100644
--- a/www/routes.js
+++ b/www/routes.js
@@ -752,7 +752,12 @@ var routes = [
                                     value: "light",
                                     label: "Light",
                                     selected: getStorage("apptheme") == "light"
-                                }
+                                },
+                                {
+                                    value: "oleddark",
+                                    label: "Dark with anti-burn-in",
+                                    selected: getStorage("apptheme") == "oleddark"
+                                },
                             ]
                         },
                         {