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

Dark mode : pill toggle switch ☀️/🌙 + fix JS
Deploy to Pacha Family / deploy (push) Failing after 3s
Details

Browse Source 
Remplace le bouton emoji par un vrai switch pill CSS (track + thumb
glissant, soleil/lune qui s'estompent). État visuel entièrement piloté
par [data-theme="dark"] via CSS, JS se contente de toggler l'attribut.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
perco
2026-05-11 17:47:07 +02:00
co-authored by Claude Sonnet 4.6
parent 19031548e1
commit b9403ef86b
2 changed files with 32 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
header.php
+8 -11
View File
@@ -56,7 +56,11 @@ $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>
<button class="theme-switch" id="theme-toggle" onclick="toggleTheme()" title="Thème sombre / clair" aria-label="Basculer le thème">
<span class="ts-sun" aria-hidden="true">☀️</span>
<span class="ts-track"><span class="ts-thumb"></span></span>
<span class="ts-moon" aria-hidden="true">🌙</span>
</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;">
@@ -121,19 +125,12 @@ $currentLang = $_SESSION['app_lang'] ?? 'fr';
return window.I18N[key] || key;
}
// Thème clair/sombre
// Thème clair/sombre — état visuel géré entièrement par CSS via [data-theme="dark"]
function toggleTheme(){
const html=document.documentElement;
const dark=html.getAttribute('data-theme')==='dark';
html.setAttribute('data-theme',dark?'light':'dark');
const dark=document.documentElement.getAttribute('data-theme')==='dark';
document.documentElement.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'])): ?>