Mirrors/wireguard_webadmin
1
0
Fork 0
mirror of https://github.com/eduardogsilva/wireguard_webadmin.git synced 2026-03-22 00:16:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

add dark mode synchronization script and update image source conditions

Browse Source
This commit is contained in:
Eduardo Silva
2026-03-17 20:08:02 -03:00
parent 25ed71ce57
commit 0bd4136b5f
7 changed files with 28 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
templates/base.html
View File

@@ -19,6 +19,7 @@
}
})();
</script>
{% include 'template_parts/dark_mode_active_sync.html' %}
<div class="wrapper">
<!-- Preloader -->

1
templates/base_login.html
View File

@@ -75,6 +75,7 @@
}
})();
</script>
{% include 'template_parts/dark_mode_active_sync.html' %}
{% block content %}
{% endblock %}

2
templates/template_parts/base_scripts.html
View File

@@ -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();
});

21
templates/template_parts/dark_mode_active_sync.html Normal file
View File

@@ -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>

2
templates/wireguard/server_detail.html
View File

@@ -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>

2
templates/wireguard/wireguard_manage_peer.html
View File

@@ -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>

2
templates/wireguard/wireguard_status.html
View File

@@ -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>