Dark mode : toggle 🌙/☀️ dans le header, thème persisté en localStorage
Deploy to Pacha Family / deploy (push) Failing after 3s
Deploy to Pacha Family / deploy (push) Failing after 3s
- [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
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
87035ed3b6
commit
19031548e1
+62
@@ -687,3 +687,65 @@ p {
|
||||
padding: 16px; /* Bouton plus haut pour un appui facile au pouce */
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
/* ══════════════════════════════════════════════════════════════
|
||||
DARK MODE — [data-theme="dark"] sur <html>
|
||||
══════════════════════════════════════════════════════════════ */
|
||||
[data-theme="dark"] {
|
||||
--text-main: #e6edf3;
|
||||
--text-muted: #8b949e;
|
||||
--bg-page: #0d1117;
|
||||
--bg-panel: #161b22;
|
||||
--border-light: #30363d;
|
||||
--shadow: 0 4px 6px -1px rgba(0,0,0,.4), 0 2px 4px -2px rgba(0,0,0,.3);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,.5), 0 4px 6px -4px rgba(0,0,0,.4);
|
||||
}
|
||||
[data-theme="dark"] body { background: var(--bg-page); color: var(--text-main); }
|
||||
[data-theme="dark"] .pf-header { background: var(--bg-panel); border-color: var(--border-light); }
|
||||
[data-theme="dark"] .pf-logo { color: var(--primary); }
|
||||
[data-theme="dark"] .pf-nav-link { color: var(--text-muted); }
|
||||
[data-theme="dark"] .pf-nav-link:hover { background: rgba(255,255,255,.06); color: var(--text-main); }
|
||||
[data-theme="dark"] .pf-nav-link--active { background: rgba(59,130,246,.15); color: var(--primary); }
|
||||
[data-theme="dark"] .pf-user-badge { color: var(--text-muted); }
|
||||
[data-theme="dark"] .pf-logout-btn { color: #f87171; }
|
||||
[data-theme="dark"] .pf-logout-btn:hover { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.3); }
|
||||
[data-theme="dark"] .pf-burger-btn { color: var(--text-main); }
|
||||
[data-theme="dark"] .pf-mobile-menu { background: var(--bg-panel); color: var(--text-main); }
|
||||
[data-theme="dark"] .pf-mobile-menu-header { background: var(--bg-page); border-color: var(--border-light); }
|
||||
[data-theme="dark"] .pf-mobile-nav-link { color: var(--text-main); border-color: var(--border-light); }
|
||||
[data-theme="dark"] .pf-mobile-nav-link:active { background: rgba(255,255,255,.06); }
|
||||
[data-theme="dark"] .pf-module-card { background: var(--bg-panel); border-color: var(--border-light); }
|
||||
[data-theme="dark"] .pf-module-card:hover { border-color: #484f58; box-shadow: var(--shadow); }
|
||||
[data-theme="dark"] .pf-card-title { color: var(--text-main); }
|
||||
[data-theme="dark"] .pf-card-desc { color: var(--text-muted); }
|
||||
[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3 { color: var(--text-main); }
|
||||
[data-theme="dark"] p { color: var(--text-muted); }
|
||||
[data-theme="dark"] .pf-btn.btn-secondary { background: var(--bg-panel); color: var(--text-muted); border-color: var(--border-light); }
|
||||
[data-theme="dark"] .pf-btn.btn-secondary:hover { background: rgba(255,255,255,.05); color: var(--text-main); border-color: #484f58; }
|
||||
[data-theme="dark"] .pf-input { background: #1c2128; border-color: var(--border-light); color: var(--text-main); }
|
||||
[data-theme="dark"] .pf-input::placeholder { color: #484f58; }
|
||||
[data-theme="dark"] .pf-input:focus { background: #1c2128; border-color: var(--primary); }
|
||||
[data-theme="dark"] .pf-table { background: var(--bg-panel); }
|
||||
[data-theme="dark"] .pf-table th { background: #1c2128; color: var(--text-muted); border-color: var(--border-light); }
|
||||
[data-theme="dark"] .pf-table td { border-color: rgba(48,54,61,.5); color: var(--text-main); }
|
||||
[data-theme="dark"] .pf-table tbody tr:hover { background: rgba(255,255,255,.03); }
|
||||
[data-theme="dark"] .pf-modal-content { background: var(--bg-panel); border: 1px solid var(--border-light); }
|
||||
[data-theme="dark"] .pf-modal-title { border-color: var(--border-light); color: var(--text-main); }
|
||||
[data-theme="dark"] .modal-footer { border-color: var(--border-light); }
|
||||
[data-theme="dark"] .pf-footer { background: var(--bg-panel); border-color: var(--border-light); }
|
||||
[data-theme="dark"] .pf-toast { background: var(--bg-panel); color: var(--text-main); box-shadow: 0 10px 25px rgba(0,0,0,.4); }
|
||||
[data-theme="dark"] .pf-login-card { background: var(--bg-panel); border-color: var(--border-light); }
|
||||
[data-theme="dark"] .pf-login-error { background: rgba(239,68,68,.1); border-color: rgba(239,68,68,.3); }
|
||||
[data-theme="dark"] .btn-icon-action.edit:hover { background: rgba(59,130,246,.15); }
|
||||
[data-theme="dark"] .btn-icon-action.delete:hover { background: rgba(239,68,68,.1); }
|
||||
|
||||
/* Toggle thème */
|
||||
.theme-toggle {
|
||||
background: none; border: 1px solid var(--border-light);
|
||||
border-radius: 8px; cursor: pointer; font-size: 1rem; line-height: 1;
|
||||
padding: .28rem .45rem; color: var(--text-muted);
|
||||
transition: background .15s, color .15s;
|
||||
}
|
||||
.theme-toggle:hover { background: #f1f5f9; color: var(--text-main); }
|
||||
[data-theme="dark"] .theme-toggle { color: var(--text-muted); }
|
||||
[data-theme="dark"] .theme-toggle:hover { background: rgba(255,255,255,.08); color: var(--text-main); }
|
||||
|
||||
+16
-1
@@ -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', () => {
|
||||
|
||||
@@ -316,3 +316,51 @@ textarea.form-control { resize: vertical; min-height: 80px; }
|
||||
.garage-subnav { padding: 8px 12px; overflow-x: auto; flex-wrap: nowrap; }
|
||||
.garage-subnav .nav-link { white-space: nowrap; }
|
||||
}
|
||||
|
||||
/* ══ DARK MODE — Garage module ══════════════════════════════════ */
|
||||
[data-theme="dark"] { --muted: #8b949e; --fg: #e6edf3; }
|
||||
[data-theme="dark"] .garage-subnav { background: var(--bg-panel); border-color: var(--border-light); }
|
||||
[data-theme="dark"] .garage-subnav .nav-link { color: var(--text-muted); }
|
||||
[data-theme="dark"] .garage-subnav .nav-link:hover { background: rgba(255,255,255,.06); color: var(--text-main); }
|
||||
[data-theme="dark"] .garage-subnav .nav-link.active { background: rgba(59,130,246,.15); color: var(--primary); border-color: rgba(59,130,246,.3); }
|
||||
[data-theme="dark"] .card,
|
||||
[data-theme="dark"] .vehicle-detail-header { background: var(--bg-panel); border-color: var(--border-light); }
|
||||
[data-theme="dark"] .stat-pill { background: var(--bg-panel); border-color: var(--border-light); }
|
||||
[data-theme="dark"] .stat-pill .label { color: var(--text-muted); }
|
||||
[data-theme="dark"] .vehicle-card { background: var(--bg-panel); border-color: var(--border-light); }
|
||||
[data-theme="dark"] .vehicle-card:hover { border-color: var(--primary); }
|
||||
[data-theme="dark"] .vehicle-card-img { background: #1c2128; }
|
||||
[data-theme="dark"] .vehicle-card-footer { background: #1c2128; border-color: var(--border-light); }
|
||||
[data-theme="dark"] .vehicle-card-title { color: var(--text-main); }
|
||||
[data-theme="dark"] .vehicle-card-sub { color: var(--text-muted); }
|
||||
[data-theme="dark"] .vehicle-detail-img { background: #1c2128; }
|
||||
[data-theme="dark"] .vehicle-meta h2 { color: var(--text-main); }
|
||||
[data-theme="dark"] .meta-item .v { color: var(--text-main); }
|
||||
[data-theme="dark"] .card-title, [data-theme="dark"] .modal-title { color: var(--text-main); }
|
||||
[data-theme="dark"] .table-wrap { border-color: var(--border-light); }
|
||||
[data-theme="dark"] .table-wrap table th { background: #1c2128; color: var(--text-muted); border-color: var(--border-light); }
|
||||
[data-theme="dark"] .table-wrap table td { border-color: rgba(48,54,61,.4); color: var(--text-main); }
|
||||
[data-theme="dark"] .table-wrap table tr:hover td { background: rgba(255,255,255,.03); }
|
||||
[data-theme="dark"] .tabs { border-color: var(--border-light); }
|
||||
[data-theme="dark"] .tab-btn { color: var(--text-muted); }
|
||||
[data-theme="dark"] .tab-btn:hover { color: var(--text-main); }
|
||||
[data-theme="dark"] .form-label { color: var(--text-muted); }
|
||||
[data-theme="dark"] .form-control { background: #1c2128; border-color: var(--border-light); color: var(--text-main); }
|
||||
[data-theme="dark"] .form-control::placeholder { color: #484f58; }
|
||||
[data-theme="dark"] select.form-control option { background: #1c2128; }
|
||||
[data-theme="dark"] .modal { background: var(--bg-panel); border-color: var(--border-light); }
|
||||
[data-theme="dark"] .modal-header,
|
||||
[data-theme="dark"] .modal-footer { border-color: var(--border-light); }
|
||||
[data-theme="dark"] .modal-close:hover { background: rgba(255,255,255,.06); }
|
||||
[data-theme="dark"] .btn-secondary { background: #1c2128; border-color: var(--border-light); color: var(--text-main); }
|
||||
[data-theme="dark"] .btn-secondary:hover { background: rgba(255,255,255,.06); }
|
||||
[data-theme="dark"] .btn-danger { background: #1c2128; border-color: rgba(239,68,68,.4); }
|
||||
[data-theme="dark"] .btn-danger:hover { background: rgba(239,68,68,.08); }
|
||||
[data-theme="dark"] .badge-gray { background: rgba(139,148,158,.15); color: var(--text-muted); }
|
||||
[data-theme="dark"] .toast { background: var(--bg-panel); border-color: var(--border-light); color: var(--text-main); }
|
||||
[data-theme="dark"] .part-thumb { border-color: var(--border-light); }
|
||||
[data-theme="dark"] .scroll-list { background: #1c2128; border-color: var(--border-light); }
|
||||
[data-theme="dark"] .scroll-list-item { border-color: rgba(48,54,61,.5); }
|
||||
[data-theme="dark"] .scroll-list-item:hover { background: rgba(255,255,255,.04); }
|
||||
[data-theme="dark"] .item-name { color: var(--text-main); }
|
||||
[data-theme="dark"] #inline-part-form { background: #1c2128 !important; border-color: var(--border-light) !important; }
|
||||
|
||||
Reference in New Issue
Block a user