ijuanes/GestionTablets
ijuanes/GestionTablets
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add dark mode toggle with persistence and fix visibility issues

Browse source 
- Add Font Awesome for moon/sun icons
- Add dark mode CSS styles for body, inputs, tables, flash messages
- Add theme toggle button next to language switcher
- Add localStorage persistence for theme preference
- Fix code/bg-gray-100 visibility in dark mode
- Fix table header text color in dark mode
This commit is contained in:
ijuanes 2026-06-23 20:54:15 +01:00
parent 2959cd5299
commit b8ecfce5f0
1 changed files with 124 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

124
templates/base.html
View file

@ -11,6 +11,9 @@
<!-- HTMX -->
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
<!-- Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-1y8c6Y8XkZ7Q1Y+v5vYpX+g5Z4XhY+6eZ6X9p6Z1cM5Xf+Z7x2J6FQ0w9Xc3YfXMgZ6e5Z7+6f5Q==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- Custom styles -->
<style>
body {
@ -39,6 +42,89 @@
.htmx-request .htmx-indicator {
opacity: 1;
}
/* Dark mode styles */
body.dark-mode {
background-color: #1a1a2e;
color: #e0e0e0;
}
body.dark-mode .bg-gray-50 {
background-color: #1a1a2e;
}
body.dark-mode .bg-white {
background-color: #16213e;
}
body.dark-mode .text-gray-900,
body.dark-mode .text-gray-800,
body.dark-mode .text-gray-700 {
color: #e0e0e0;
}
body.dark-mode .text-gray-600 {
color: #b0b0b0;
}
body.dark-mode .text-gray-500 {
color: #9ca3af;
}
body.dark-mode th.text-gray-500 {
color: #d1d5db;
}
body.dark-mode .border-gray-200 {
border-color: #374151;
}
body.dark-mode .border-gray-300 {
border-color: #4b5563;
}
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
background-color: #1f2937;
border-color: #374151;
color: #e0e0e0;
}
body.dark-mode .bg-green-100 {
background-color: #064e3b;
color: #a7f3d0;
}
body.dark-mode .bg-red-100 {
background-color: #7f1d1d;
color: #fecaca;
}
body.dark-mode .bg-yellow-100 {
background-color: #78350f;
color: #fde68a;
}
body.dark-mode .bg-blue-100 {
background-color: #1e3a8a;
color: #bfdbfe;
}
body.dark-mode .bg-cobalt-600 {
background-color: #0b1f72;
}
body.dark-mode .bg-cobalt-700 {
background-color: #081552;
}
body.dark-mode table {
background-color: #16213e;
}
body.dark-mode th {
background-color: #1f2937;
color: #e0e0e0;
}
body.dark-mode td {
border-color: #374151;
}
body.dark-mode tr:hover {
background-color: #1f2937;
}
body.dark-mode .shadow-md,
body.dark-mode .shadow-lg {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
}
body.dark-mode code,
body.dark-mode .bg-gray-100 {
background-color: #374151;
color: #e0e0e0;
}
</style>
<!-- Tailwind config for custom corporate colors -->
@ -129,6 +215,12 @@
{{ lang_name }}
</a>
{% endfor %}
<!-- Theme Toggle -->
<a href="#" id="theme-toggle" class="text-white hover:text-cobalt-200 ml-2" title="{{ _('Toggle dark mode') }}">
<span class="icon-moon">🌙</span>
<span class="icon-sun" style="display:none;">☀️</span>
</a>
</div>
</div>
</div>
@ -221,5 +313,37 @@
</div>
</footer>
</div>
<!-- Theme Toggle Script -->
<script>
// Check for saved theme preference or default to light mode
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
document.body.classList.add('dark-mode');
updateToggleIcon(true);
} else if (savedTheme !== 'light') {
// Invalid value - clear and default to light
localStorage.removeItem('theme');
}
document.getElementById('theme-toggle').addEventListener('click', function(e) {
e.preventDefault();
const isDark = document.body.classList.toggle('dark-mode');
localStorage.setItem('theme', isDark ? 'dark' : 'light');
updateToggleIcon(isDark);
});
function updateToggleIcon(isDark) {
const iconMoon = document.querySelector('.icon-moon');
const iconSun = document.querySelector('.icon-sun');
if (isDark) {
iconMoon.style.display = 'none';
iconSun.style.display = 'inline';
} else {
iconMoon.style.display = 'inline';
iconSun.style.display = 'none';
}
}
</script>
</body>
</html>