dark mode toggle on sidenav works now. it changes the user's theme setting.

dashmachine/main/modify_config.py

@@ -7,8 +7,9 @@ from dashmachine.main.utils import make_dict_list_string, convert_form_boolean
 from dashmachine.main.models import DataSources
 
 
-def modify_config(form):
-    form = dict(form)
+def modify_config(form, convert_form=True):
+    if convert_form:
+        form = dict(form)
     config = ConfigParser(interpolation=None)
     try:
         config.read(os.path.join(user_data_folder, "config.ini"))

dashmachine/main/routes.py

@@ -411,6 +411,32 @@ def save_ini_form_to_config():
     return modify_config(request.form)
 
 
+@main.route("/toggle_theme", methods=["GET"])
+def toggle_theme():
+    user = User.query.filter_by(id=request.args.get("id")).first()
+    if request.args.get("current_status") == "toggle_off":
+        theme = "dark"
+    elif request.args.get("current_status") == "toggle_on":
+        theme = "light"
+
+    form = row2dict(user)
+    form["ini_section"] = "Users"
+    form["ini_id"] = ""
+    form["prev_name"] = user.username
+    form["password"] = ""
+    form["confirm_password"] = ""
+    form["theme"] = theme
+    del form["id"]
+    del_keys = []
+    for k, v in form.items():
+        if v == "None":
+            del_keys.append(k)
+    for k in del_keys:
+        del form[k]
+
+    return modify_config(form=form)
+
+
 # ------------------------------------------------------------------------------
 # TCDROP routes
 # ------------------------------------------------------------------------------

dashmachine/static/js/main/config-editor.js

@@ -25,7 +25,7 @@ sleep(500).then(() => {
 
     var ctrlDown = false;
     var saved = false;
-    $( document ).keydown(function( e ) {
+    $("#config-editor-container").keydown(function( e ) {
         if (e.key === 'Control') {
             ctrlDown = true;
         }
@@ -35,7 +35,7 @@ sleep(500).then(() => {
             $("#save-config-btn").trigger("click")
         }
     });
-    $( document ).keyup(function( e ) {
+    $("#config-editor-container").keyup(function( e ) {
         if (e.key === 'Control') {
             ctrlDown = false;
         }

dashmachine/static/js/main/dashmachine.js

@@ -455,6 +455,27 @@ $(document).ready(function () {
         $("#card-editor-add-btn").dropdown('recalculateDimensions');
     });
 
+    $("#toggle-user-theme-btn").on('click', function(e) {
+        var icon_btn = $(this).find('.icon-btn');
+        $.ajax({
+            url: $(this).attr('data-url'),
+            type: 'GET',
+            data: {id: $(this).attr("data-user_id"), current_status: icon_btn.text()},
+            success: function(data){
+                fetch_settings();
+                if (icon_btn.text() == "toggle_on"){
+                    icon_btn.text('toggle_off');
+                    icon_btn.removeClass('theme-primary-text');
+                    icon_btn.addClass('theme-secondary-text');
+                } else {
+                    icon_btn.text('toggle_on');
+                    icon_btn.removeClass('theme-secondary-text');
+                    icon_btn.addClass('theme-primary-text');
+                }
+            }
+        });
+    });
+
 
     // ACTION BARS
     var action_providers = {}

dashmachine/templates/main/layout.html

@@ -57,7 +57,23 @@
 
     <div id="main-sidenav" class="sidenav theme-background z-depth-5" style="z-index: 8001">
         <div class="row mt-2 mr-2 ml-2">
-            <i class="material-icons-outlined icon-btn theme-secondary-text">toggle_off</i>
+            {% if current_user %}
+                <span id="toggle-user-theme-btn" data-url="{{ url_for('main.toggle_theme') }}" data-user_id="{{ current_user.id }}">
+                    {% if current_user.theme %}
+                        {% if current_user.theme == "light" %}
+                            <i class="material-icons-outlined icon-btn theme-secondary-text">toggle_off</i>
+                        {% elif current_user.theme == "dark" %}
+                            <i class="material-icons-outlined icon-btn theme-primary-text">toggle_on</i>
+                        {% endif %}
+                    {% else %}
+                        {% if settings.theme == "light" %}
+                            <i class="material-icons-outlined icon-btn theme-secondary-text">toggle_off</i>
+                        {% elif settings.theme == "dark" %}
+                            <i class="material-icons-outlined icon-btn theme-primary-text">toggle_on</i>
+                        {% endif %}
+                    {% endif %}
+                </span>
+            {% endif %}
 
             {% if page != "home" %}
                 <a href="{{ url_for('main.home') }}">