diff --git a/templates/base.html b/templates/base.html
index 82694a6..a3717d7 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -19,6 +19,7 @@
     }
 })();
 </script>
+{% include 'template_parts/dark_mode_active_sync.html' %}
 <div class="wrapper">
 
     <!-- Preloader -->
diff --git a/templates/base_login.html b/templates/base_login.html
index 7cdd76c..7e3482e 100644
--- a/templates/base_login.html
+++ b/templates/base_login.html
@@ -75,6 +75,7 @@
     }
 })();
 </script>
+{% include 'template_parts/dark_mode_active_sync.html' %}
 {% block content %}
 {% endblock %}
 
diff --git a/templates/template_parts/base_scripts.html b/templates/template_parts/base_scripts.html
index d0e17dd..e29424b 100644
--- a/templates/template_parts/base_scripts.html
+++ b/templates/template_parts/base_scripts.html
@@ -136,9 +136,11 @@
             if ($('body').hasClass('dark-mode')) {
                 $('body').removeClass('dark-mode');
                 setCookie('darkMode', 'light', 365);
+                setCookie('darkModeActive', '0', 365);
             } else {
                 $('body').addClass('dark-mode');
                 setCookie('darkMode', 'dark', 365);
+                setCookie('darkModeActive', '1', 365);
             }
             syncDarkModeUI();
         });
diff --git a/templates/template_parts/dark_mode_active_sync.html b/templates/template_parts/dark_mode_active_sync.html
new file mode 100644
index 0000000..b2f7ec9
--- /dev/null
+++ b/templates/template_parts/dark_mode_active_sync.html
@@ -0,0 +1,21 @@
+<script>
+(function () {
+    function setCookie(name, value, days) {
+        var d = new Date();
+        d.setTime(d.getTime() + days * 24 * 60 * 60 * 1000);
+        document.cookie = name + '=' + value + ';path=/;expires=' + d.toUTCString();
+    }
+    function getCookie(name) {
+        var m = document.cookie.match(new RegExp('(?:^|; )' + name + '=([^;]*)'));
+        return m ? m[1] : null;
+    }
+    var userPref = getCookie('darkMode');
+    var isDark;
+    if (userPref) {
+        isDark = userPref === 'dark';
+    } else {
+        isDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+    }
+    setCookie('darkModeActive', isDark ? '1' : '0', 365);
+})();
+</script>
diff --git a/templates/wireguard/server_detail.html b/templates/wireguard/server_detail.html
index 87c0401..8bbda9d 100644
--- a/templates/wireguard/server_detail.html
+++ b/templates/wireguard/server_detail.html
@@ -74,7 +74,7 @@
                 </div>
             </div>
             <div class="card-body">
-                <img src="/rrd/graph/?instance={{ instance.uuid }}&period={{ request.GET.period|default:'6h' }}{% if request.COOKIES.darkMode == 'dark' %}&dark=1{% endif %}"
+                <img src="/rrd/graph/?instance={{ instance.uuid }}&period={{ request.GET.period|default:'6h' }}{% if request.COOKIES.darkModeActive == '1' %}&dark=1{% endif %}"
                     class="img-fluid" alt="RRD Graph">
             </div>
         </div>
diff --git a/templates/wireguard/wireguard_manage_peer.html b/templates/wireguard/wireguard_manage_peer.html
index faaf380..e120fc5 100644
--- a/templates/wireguard/wireguard_manage_peer.html
+++ b/templates/wireguard/wireguard_manage_peer.html
@@ -148,7 +148,7 @@
                             </div>
 
                             <center>
-                                <img id="graphImg" src="/rrd/graph/?peer={{ current_peer.uuid }}{% if request.GET.period %}&period={{ request.GET.period }}{% endif %}{% if request.COOKIES.darkMode == 'dark' %}&dark=1{% endif %}"
+                                <img id="graphImg" src="/rrd/graph/?peer={{ current_peer.uuid }}{% if request.GET.period %}&period={{ request.GET.period }}{% endif %}{% if request.COOKIES.darkModeActive == '1' %}&dark=1{% endif %}"
                                      class="img-fluid" alt="{% trans 'No traffic history, please wait a few minutes' %}"
                                      onerror="this.onerror=null; this.style.display='none'; this.insertAdjacentHTML('afterend', this.alt);">
                             </center>
diff --git a/templates/wireguard/wireguard_status.html b/templates/wireguard/wireguard_status.html
index d3b116c..e8849d8 100644
--- a/templates/wireguard/wireguard_status.html
+++ b/templates/wireguard/wireguard_status.html
@@ -40,7 +40,7 @@
                     <div class="col-md-6">
                         <h3>wg{{ wireguard_instance.instance_id }} {% if wireguard_instance.name %}({{ wireguard_instance.name }}){% endif %}</h3>
                         <p><b><i class="fas fa-chart-area nav-icon"></i> {% trans 'Instance Traffic' %}</b></p>
-                        <img id="graphImg" src="/rrd/graph/?instance={{ wireguard_instance.uuid }}{% if request.GET.period %}&period={{ request.GET.period }}{% endif %}{% if request.COOKIES.darkMode == 'dark' %}&dark=1{% endif %}" class="img-fluid" alt="No traffic history, please wait a few minutes" onerror="this.onerror=null; this.style.display='none'; this.insertAdjacentHTML('afterend', this.alt);">
+                        <img id="graphImg" src="/rrd/graph/?instance={{ wireguard_instance.uuid }}{% if request.GET.period %}&period={{ request.GET.period }}{% endif %}{% if request.COOKIES.darkModeActive == '1' %}&dark=1{% endif %}" class="img-fluid" alt="No traffic history, please wait a few minutes" onerror="this.onerror=null; this.style.display='none'; this.insertAdjacentHTML('afterend', this.alt);">
                         <p>
                             <b><i class="fas fa-network-wired nav-icon"></i> {% trans 'IP Address' %}: </b>{{ wireguard_instance.address }}/{{ wireguard_instance.netmask }}<br>
                             <b><i class="fas fa-link nav-icon"></i> {% trans 'Public Address' %}: </b>{{ wireguard_instance.hostname }}<br>