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

7
templates/template_parts/base_navbar.html
View File

@@ -1,6 +1,6 @@
{% load i18n %}
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<nav class="main-header navbar navbar-expand {% if request.COOKIES.darkMode == 'dark' %}navbar-dark{% else %}navbar-white navbar-light{% endif %}">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
@@ -10,6 +10,11 @@
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a href="#" class="nav-link" id="darkModeToggle" title="{% trans 'Toggle Dark Mode' %}">
<i class="fas {% if request.COOKIES.darkMode == 'dark' %}fa-sun{% else %}fa-moon{% endif %}" id="darkModeIcon"></i>
</a>
</li>
<li class="nav-item">
<a href="/change_language/" class="nav-link" title="{% trans 'Change Language' %}">
<i class="fas fa-language"></i>

40
templates/template_parts/base_scripts.html
View File

@@ -104,6 +104,46 @@
</script>
<script>
function syncDarkModeUI() {
var isDark = $('body').hasClass('dark-mode');
if (isDark) {
$('.main-header').removeClass('navbar-white navbar-light').addClass('navbar-dark');
$('#darkModeIcon').removeClass('fa-moon').addClass('fa-sun');
} else {
$('.main-header').removeClass('navbar-dark').addClass('navbar-white navbar-light');
$('#darkModeIcon').removeClass('fa-sun').addClass('fa-moon');
}
}
$(document).ready(function() {
syncDarkModeUI();
if (window.matchMedia) {
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function(e) {
if (!getCookie('darkMode')) {
if (e.matches) {
$('body').addClass('dark-mode');
} else {
$('body').removeClass('dark-mode');
}
syncDarkModeUI();
}
});
}
$('#darkModeToggle').on('click', function(e) {
e.preventDefault();
if ($('body').hasClass('dark-mode')) {
$('body').removeClass('dark-mode');
setCookie('darkMode', 'light', 365);
} else {
$('body').addClass('dark-mode');
setCookie('darkMode', 'dark', 365);
}
syncDarkModeUI();
});
});
$(document).ready(function() {
var sidebarState = getCookie('sidebarState');
if (sidebarState === 'collapsed') {