From e91bc481683d618a5c99e7aa75535ac9dfdae0bc Mon Sep 17 00:00:00 2001 From: Eduardo Silva Date: Tue, 17 Mar 2026 12:04:11 -0300 Subject: [PATCH] add dark mode support --- static_files/custom_styles.css | 96 ++++++++++++++ templates/accounts/login.html | 12 +- templates/base.html | 10 +- templates/base_login.html | 120 +++++++++++++++++- templates/template_parts/base_navbar.html | 7 +- templates/template_parts/base_scripts.html | 40 ++++++ .../wireguard/peer_list/custom_styles.html | 31 ----- .../peer_list/script_peer_modal.html | 6 +- templates/wireguard/server_detail.html | 2 +- .../wireguard/wireguard_manage_peer.html | 5 +- templates/wireguard/wireguard_status.html | 2 +- wgrrd/views.py | 36 +++++- 12 files changed, 315 insertions(+), 52 deletions(-) diff --git a/static_files/custom_styles.css b/static_files/custom_styles.css index 39a052c..8f55a99 100644 --- a/static_files/custom_styles.css +++ b/static_files/custom_styles.css @@ -27,3 +27,99 @@ body.layout-boxed .wrapper { 50% { opacity: 0.3; transform: scale(1.1); } 100% { opacity: 1; transform: scale(1); } } + + +/* ── Peer list ── */ +.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; +} + + +/* ── Dark mode ── */ +body.dark-mode.layout-boxed { + background: radial-gradient(circle at center, #1c2025 0%, #272c31 60%, #2d3238 100%); +} +body.dark-mode.layout-boxed .wrapper { + background-color: #343a40; + box-shadow: 0 0 20px rgba(0,0,0,0.6); +} + +body.dark-mode pre { + background-color: #2d3035; + color: #dee2e6; + border: 1px solid #4b545c; +} + +body.dark-mode .btn-primary { + background-color: #3d8bcd; + border-color: #3d8bcd; + color: #fff; +} +body.dark-mode .btn-primary:hover, +body.dark-mode .btn-primary:focus { + background-color: #4d9eff; + border-color: #4d9eff; + color: #fff; +} +body.dark-mode .btn-outline-primary { + color: #3d8bcd; + border-color: #3d8bcd; +} +body.dark-mode .btn-outline-primary:hover, +body.dark-mode .btn-outline-primary:focus { + background-color: #3d8bcd; + border-color: #3d8bcd; + color: #fff; +} +body.dark-mode .text-primary { + color: #3d8bcd !important; +} +body.dark-mode a { + color: #3d8bcd; +} +body.dark-mode a:hover { + color: #4d9eff; +} +body.dark-mode .card-primary.card-outline { + border-top-color: #3d8bcd; +} +body.dark-mode .nav-pills .nav-link.active, +body.dark-mode .nav-pills .show > .nav-link { + background-color: #3d8bcd; +} + +body.dark-mode .div-peer-text-information { + background: linear-gradient(to right, #3f474e, transparent); +} +body.dark-mode .div-peer-text-information h5 a { + color: #dee2e6; +} +body.dark-mode .div-peer-text-information h5 a:hover { + color: #fff; +} diff --git a/templates/accounts/login.html b/templates/accounts/login.html index 602abe1..51c92ca 100644 --- a/templates/accounts/login.html +++ b/templates/accounts/login.html @@ -31,12 +31,16 @@
-
- - {% trans 'Language' %} +
+ + + +
+
+ +
-
diff --git a/templates/base.html b/templates/base.html index f32a3ef..82694a6 100644 --- a/templates/base.html +++ b/templates/base.html @@ -10,7 +10,15 @@ {% block page_custom_head %}{% endblock %} - + +
diff --git a/templates/base_login.html b/templates/base_login.html index 7d537b8..7cdd76c 100644 --- a/templates/base_login.html +++ b/templates/base_login.html @@ -15,8 +15,66 @@ + + - + + {% block content %} {% endblock %} @@ -26,6 +84,64 @@ + + + {% include 'template_parts/base_messages.html' %} - \ No newline at end of file + diff --git a/templates/template_parts/base_navbar.html b/templates/template_parts/base_navbar.html index aa301f9..11ee592 100644 --- a/templates/template_parts/base_navbar.html +++ b/templates/template_parts/base_navbar.html @@ -1,6 +1,6 @@ {% load i18n %} -
- RRD Graph
diff --git a/templates/wireguard/wireguard_manage_peer.html b/templates/wireguard/wireguard_manage_peer.html index ea4a822..faaf380 100644 --- a/templates/wireguard/wireguard_manage_peer.html +++ b/templates/wireguard/wireguard_manage_peer.html @@ -148,7 +148,7 @@
- {% trans 'No traffic history, please wait a few minutes' %}
@@ -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); diff --git a/templates/wireguard/wireguard_status.html b/templates/wireguard/wireguard_status.html index b46270e..d3b116c 100644 --- a/templates/wireguard/wireguard_status.html +++ b/templates/wireguard/wireguard_status.html @@ -40,7 +40,7 @@

wg{{ wireguard_instance.instance_id }} {% if wireguard_instance.name %}({{ wireguard_instance.name }}){% endif %}

{% trans 'Instance Traffic' %}

- No traffic history, please wait a few minutes + No traffic history, please wait a few minutes

{% trans 'IP Address' %}: {{ wireguard_instance.address }}/{{ wireguard_instance.netmask }}
{% trans 'Public Address' %}: {{ wireguard_instance.hostname }}
diff --git a/wgrrd/views.py b/wgrrd/views.py index 17d80cd..3cd1c76 100644 --- a/wgrrd/views.py +++ b/wgrrd/views.py @@ -1,18 +1,17 @@ +import base64 +import os import subprocess +import tempfile from django.contrib.auth.decorators import login_required from django.core.exceptions import PermissionDenied from django.http import Http404, HttpResponse -from django.shortcuts import render, get_object_or_404 +from django.shortcuts import get_object_or_404 from user_manager.models import UserAcl from wgwadmlibrary.tools import user_has_access_to_peer from wireguard.models import Peer, WireGuardInstance -import base64 -import tempfile -import os - @login_required def view_rrd_graph(request): @@ -45,21 +44,44 @@ def view_rrd_graph(request): if not (period[:-1].isdigit() and period[-1] in ['h', 'd']): period = '6h' + dark_mode = request.GET.get('dark') == '1' + command = [ "rrdtool", "graph", graph_file, "--start", f"-{period}", "--title", f"{graph_title}", "--vertical-label", "Value", + ] + + if dark_mode: + command += [ + "--color", "BACK#2d3035", + "--color", "CANVAS#353a40", + "--color", "SHADEA#2d3035", + "--color", "SHADEB#2d3035", + "--color", "GRID#555c63", + "--color", "MGRID#6c7580", + "--color", "FONT#c8c8c8", + "--color", "FRAME#2d3035", + "--color", "ARROW#c8c8c8", + ] + tx_color = "4a9eff" + rx_color = "ff6b6b" + else: + tx_color = "0000FF" + rx_color = "FF0000" + + command += [ f"DEF:txdata={rrd_file_path}:tx:AVERAGE", f"DEF:rxdata={rrd_file_path}:rx:AVERAGE", "CDEF:tx_mb=txdata,1048576,/", "CDEF:rx_mb=rxdata,1048576,/", "VDEF:tx_total=tx_mb,TOTAL", "VDEF:rx_total=rx_mb,TOTAL", - "LINE1:txdata#0000FF:Transmitted ", + f"LINE1:txdata#{tx_color}:Transmitted ", "GPRINT:tx_total:%6.2lf MB", "COMMENT:\\n", - "LINE1:rxdata#FF0000:Received ", + f"LINE1:rxdata#{rx_color}:Received ", "GPRINT:rx_total:%6.2lf MB", "COMMENT:\\n" ]