templates/components/_dark_mode_toggle.html.twig line 1

Open in your IDE?
  1. {#
  2.   Composant Toggle Dark Mode
  3.   Usage: {{ include('components/_dark_mode_toggle.html.twig') }}
  4. #}
  5. <button 
  6.     id="dark-mode-toggle" 
  7.     class="dark-mode-toggle btn btn-sm btn-outline-secondary"
  8.     aria-label="Basculer le mode sombre"
  9.     title="Mode sombre"
  10.     type="button"
  11. >
  12.     <i class="fa fa-moon-o"></i>
  13. </button>
  15. <style>
  16. .dark-mode-toggle {
  17.     position: relative;
  18.     width: 40px;
  19.     height: 40px;
  20.     border-radius: var(--border-radius-full);
  21.     display: flex;
  22.     align-items: center;
  23.     justify-content: center;
  24.     transition: all var(--transition-base);
  25.     border: 1px solid var(--border-color);
  26.     background-color: var(--bg-primary);
  27.     color: var(--text-primary);
  28. }
  30. .dark-mode-toggle:hover {
  31.     background-color: var(--bg-secondary);
  32.     transform: scale(1.05);
  33. }
  35. .dark-mode-toggle i {
  36.     font-size: 1.1rem;
  37.     transition: transform var(--transition-base);
  38. }
  40. .dark-mode-toggle:hover i {
  41.     transform: rotate(15deg);
  42. }
  44. /* Animation lors du changement de thème */
  45. .dark-mode-toggle.transitioning i {
  46.     animation: spin 0.5s ease-in-out;
  47. }
  49. @keyframes spin {
  50.     from {
  51.         transform: rotate(0deg);
  52.     }
  53.     to {
  54.         transform: rotate(360deg);
  55.     }
  56. }
  57. </style>
  59. <script>
  60. // Mettre à jour le bouton lors du changement de thème
  61. window.addEventListener('themechange', function(e) {
  62.     const button = document.getElementById('dark-mode-toggle');
  63.     if (!button) return;
  64.     
  65.     const icon = button.querySelector('i');
  66.     if (!icon) return;
  67.     
  68.     // Animation
  69.     button.classList.add('transitioning');
  70.     
  71.     setTimeout(() => {
  72.         if (e.detail.theme === 'dark') {
  73.             icon.className = 'fa fa-sun-o';
  74.             button.setAttribute('title', 'Mode clair');
  75.             button.setAttribute('aria-label', 'Basculer en mode clair');
  76.         } else {
  77.             icon.className = 'fa fa-moon-o';
  78.             button.setAttribute('title', 'Mode sombre');
  79.             button.setAttribute('aria-label', 'Basculer en mode sombre');
  80.         }
  81.         
  82.         button.classList.remove('transitioning');
  83.     }, 250);
  84. });
  85. </script>