Use cookies instead of store for darkmode (#1188)

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():

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)
+    const htmlElement = document.getElementsByTagName("html");
-      .then(function () {
+    const isDarkMode = htmlElement[0].dataset.darkmode === "true";
-        const htmlElement = document.getElementsByTagName("html");
+    htmlElement[0].dataset.darkmode = !isDarkMode;
-        const isDarkMode = htmlElement[0].dataset.darkmode === "true";
+    if (isDarkMode) {
-        htmlElement[0].dataset.darkmode = !isDarkMode;
+      button.classList.remove("dark");
-        if (isDarkMode) {
+      setCookieValue(false);
-          button.classList.remove("dark");
+    } else {
-        } else {
+      button.classList.add("dark");
-          button.classList.add("dark");
+      setCookieValue(true);
-        }
+    }
-      })
-      .catch(function (e) {
-        console.log("Can't toggle the theme. Error was: ", e);
-      });
   };
+
+  const setCookieValue = (value) => {
+    document.cookie = `css_dark_mode=${value};max-age=31536000`
+  }
 });