perco/HouseHub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Dark mode : toggle 🌙/☀️ dans le header, thème persisté en localStorage
Deploy to Pacha Family / deploy (push) Failing after 3s
Details

Browse Source 
- [data-theme="dark"] sur <html> avec surcharge des variables CSS
- Couverture complète : header, nav, cartes, modals, formulaires,
  tables, toasts — global + module garage
- Script early-apply dans <head> pour éviter le flash au rechargement
- Bouton toggle dans le header (desktop + mobile via le burger)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
perco
2026-05-11 17:42:27 +02:00
co-authored by Claude Sonnet 4.6
parent 87035ed3b6
commit 19031548e1
3 changed files with 126 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
header.php
+16 -1
View File
@@ -29,6 +29,7 @@ $currentLang = $_SESSION['app_lang'] ?? 'fr';
<?php if (!empty($pageCss)): ?>
<link rel="stylesheet" href="<?= htmlspecialchars($pageCss) ?>">
<?php endif; ?>
<script>(function(){const t=localStorage.getItem('hh-theme');if(t==='dark')document.documentElement.setAttribute('data-theme','dark');})()</script>
<style>
/* Patch CSS pour la zone droite de l'en-tête (Desktop / Mobile) */
.pf-header-right { display: flex; align-items: center; gap: 15px; }
@@ -55,7 +56,7 @@ $currentLang = $_SESSION['app_lang'] ?? 'fr';
<?php endif; ?>
<div class="pf-header-right">
<button class="theme-toggle" id="theme-toggle" title="Mode sombre / clair" onclick="toggleTheme()">🌙</button>
<?php if (isset($_SESSION['user'])): ?>
<div class="pf-desktop-actions" style="display: flex; align-items: center; gap: 10px; border-left: 1px solid #cbd5e1; padding-left: 15px;">
@@ -120,6 +121,20 @@ $currentLang = $_SESSION['app_lang'] ?? 'fr';
return window.I18N[key] || key;
}
// Thème clair/sombre
function toggleTheme(){
const html=document.documentElement;
const dark=html.getAttribute('data-theme')==='dark';
html.setAttribute('data-theme',dark?'light':'dark');
localStorage.setItem('hh-theme',dark?'light':'dark');
const btn=document.getElementById('theme-toggle');
if(btn)btn.textContent=dark?'🌙':'☀️';
}
document.addEventListener('DOMContentLoaded',function(){
const btn=document.getElementById('theme-toggle');
if(btn)btn.textContent=document.documentElement.getAttribute('data-theme')==='dark'?'☀️':'🌙';
});
// Gestion du menu mobile (Off-Canvas Sidebar)
<?php if (isset($_SESSION['user'])): ?>
document.addEventListener('DOMContentLoaded', () => {