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 support

Browse Source
This commit is contained in:
Eduardo Silva
2026-03-17 12:04:11 -03:00
parent 46b383a0b6
commit e91bc48168
12 changed files with 315 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
templates/wireguard/peer_list/custom_styles.html
View File

@@ -1,31 +0,0 @@
<style>
.peer-extra-info {
display: none;
}
.callout.position-relative {
padding: 0 !important;
}
#inviteTextContainer {
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 10px;
background-color: #f9f9f9;
}
#inviteText {
white-space: pre-line;
text-align: left;
}
.div-peer-text-information {
top: 0;
left: 0;
background: linear-gradient(to right, white, transparent);
width: 100%;
height: 100%;
}
.peer-lock-icon {
position: absolute;
right: 15px;
top: 48px;
opacity: 0.75;
}
</style>

6
templates/wireguard/peer_list/script_peer_modal.html
View File

@@ -95,7 +95,8 @@
$('#downloadConfigButton').attr('href', downloadUrl);
$('#qrcodeButton').attr('href', qrUrl);
$('#graphImg').attr('src', '/rrd/graph/?peer=' + uuid).show();
var darkParam = $('body').hasClass('dark-mode') ? '&dark=1' : '';
$('#graphImg').attr('src', '/rrd/graph/?peer=' + uuid + darkParam).show();
$('#peerPreviewModal').data('peer-uuid', uuid);
$.ajax({
@@ -130,7 +131,8 @@
e.preventDefault();
var period = $(this).data('period');
var uuid = $('#peerPreviewModal').data('peer-uuid');
var newSrc = '/rrd/graph/?peer=' + uuid + '&period=' + period;
var darkParam = $('body').hasClass('dark-mode') ? '&dark=1' : '';
var newSrc = '/rrd/graph/?peer=' + uuid + '&period=' + period + darkParam;
$('#graphImg').attr('src', newSrc);
});
</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' }}"
<img src="/rrd/graph/?instance={{ instance.uuid }}&period={{ request.GET.period|default:'6h' }}{% if request.COOKIES.darkMode == 'dark' %}&dark=1{% endif %}"
class="img-fluid" alt="RRD Graph">
</div>
</div>

5
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 %}"
<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 %}"
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>
@@ -324,7 +324,8 @@
button.addEventListener('click', function (e) {
e.preventDefault();
var period = this.getAttribute('data-period');
var newSrc = '/rrd/graph/?peer={{ current_peer.uuid }}&period=' + period;
var darkParam = $('body').hasClass('dark-mode') ? '&dark=1' : '';
var newSrc = '/rrd/graph/?peer={{ current_peer.uuid }}&period=' + period + darkParam;
var imgElement = document.getElementById('graphImg');
if (imgElement) {
imgElement.setAttribute('src', newSrc);

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 %}" 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.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);">
<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>