From e6f8b44c27082e765b9cf7af6e4fee7138117ff7 Mon Sep 17 00:00:00 2001
From: Tanc <mail@tanc.me>
Date: Sun, 4 Dec 2022 15:49:21 +0100
Subject: [PATCH] Use cookies instead of store for darkmode (#1188)

---
 changedetectionio/__init__.py               | 12 ++-------
 changedetectionio/static/js/toggle-theme.js | 30 ++++++++++-----------
 2 files changed, 16 insertions(+), 26 deletions(-)

diff --git a/changedetectionio/__init__.py b/changedetectionio/__init__.py
index 2fbda51f..5648cb53 100644
--- a/changedetectionio/__init__.py
+++ b/changedetectionio/__init__.py
@@ -203,7 +203,8 @@ def changedetection_app(config=None, datastore_o=None):
                            resource_class_kwargs={'datastore': datastore, 'update_q': update_q})
 
     def getDarkModeSetting():
-      return datastore.data['settings']['application'].get('css_dark_mode')
+      css_dark_mode = request.cookies.get('css_dark_mode')
+      return True if (css_dark_mode == 'true' or css_dark_mode == True) else False
 
     # Setup cors headers to allow all domains
     # https://flask-cors.readthedocs.io/en/latest/
@@ -1213,15 +1214,6 @@ def changedetection_app(config=None, datastore_o=None):
         flash("{} watches are queued for rechecking.".format(i))
         return redirect(url_for('index', tag=tag))
 
-    @app.route("/toggle-darkmode-state", methods=['GET'])
-    @login_required
-    def toggle_darkmode_state():
-      current_mode = datastore.data['settings']['application'].get('css_dark_mode')
-      new_mode = not current_mode
-      datastore.data['settings']['application']['css_dark_mode'] = new_mode
-      datastore.needs_write = True
-      return ''
-
     @app.route("/form/checkbox-operations", methods=['POST'])
     @login_required
     def form_watch_list_checkbox_operations():
diff --git a/changedetectionio/static/js/toggle-theme.js b/changedetectionio/static/js/toggle-theme.js
index 5e0189c3..5147edd9 100644
--- a/changedetectionio/static/js/toggle-theme.js
+++ b/changedetectionio/static/js/toggle-theme.js
@@ -3,24 +3,22 @@
  * Toggles theme between light and dark mode.
  */
 $(document).ready(function () {
-  const url = "/toggle-darkmode-state";
-
   const button = document.getElementsByClassName("toggle-theme")[0];
 
   button.onclick = () => {
-    fetch(url)
-      .then(function () {
-        const htmlElement = document.getElementsByTagName("html");
-        const isDarkMode = htmlElement[0].dataset.darkmode === "true";
-        htmlElement[0].dataset.darkmode = !isDarkMode;
-        if (isDarkMode) {
-          button.classList.remove("dark");
-        } else {
-          button.classList.add("dark");
-        }
-      })
-      .catch(function (e) {
-        console.log("Can't toggle the theme. Error was: ", e);
-      });
+    const htmlElement = document.getElementsByTagName("html");
+    const isDarkMode = htmlElement[0].dataset.darkmode === "true";
+    htmlElement[0].dataset.darkmode = !isDarkMode;
+    if (isDarkMode) {
+      button.classList.remove("dark");
+      setCookieValue(false);
+    } else {
+      button.classList.add("dark");
+      setCookieValue(true);
+    }
   };
+
+  const setCookieValue = (value) => {
+    document.cookie = `css_dark_mode=${value};max-age=31536000`
+  }
 });