El mode fosc

Una innovació que brilla en la foscor: el mode fosc, una funcionalitat que no només és estètica, sinó també pràctica i eficient. 

Explicació detallada del CSS que fa funcionar aquest mode:

🌙 Estils per al Mode Fosc (.dark-mode)

1. Cos general de la pàgina

.dark-mode {
  background-color: #1a1a1a;
  color: #f0f0f0;
}

Fons negre suau per reduir la llum emesa per la pantalla.

• Text en gris clar per mantenir la llegibilitat sense contrast excessiu.
• Ideal per a entorns amb poca llum i per estalviar bateria en pantalles OLED.

2. Zones de contingut (main, .feature, .explanation)

.dark-mode main,
.dark-mode .feature,
.dark-mode .explanation {
  background-color: #2d2d2d;
  color: #f0f0f0;
}

Fons gris fosc per mantenir la coherència visual.

• El text continua sent clar i llegible.
• S’aplica a seccions clau del contingut.

3. Barra lateral (aside)

.dark-mode aside {
  background-color: #3d3d3d;
  color: #f0f0f0;
}

Lateral una mica més clar per diferenciar-lo del main.

• Manté el contrast i la jerarquia visual.

4. Menú de navegació (.nav-links)

.dark-mode .nav-links,
.dark-mode .nav-links a {
  background-color: #2d2d2d;
  color: #f0f0f0;
}
.dark-mode .nav-links a:hover {
  background-color: #4d4d4d;
}

Fons fosc per als enllaços.

• Efecte hover amb un gris més clar per indicar interacció.
• Manté la funcionalitat sense perdre estil.

🕹️ Botó de canvi de mode (.dark-mode-toggle)

.dark-mode-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #4a6580;
  color: white;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  z-index: 1000;
  transition: background 0.3s;
}
.dark-mode-toggle:hover {
  background: #5d7a97;
}

Botó flotant a la cantonada inferior dreta.

• Forma rodona, fàcil de reconèixer i clicar.
• Color corporatiu amb ombra per destacar-lo.
• Efecte hover que canvia el fons per indicar que és interactiu.
• z-index: 1000 assegura que sempre estigui visible per sobre de tot.

🧠 Beneficis del mode fosc

• Redueix la fatiga visual en entorns foscos.
• Estalvia bateria en dispositius amb pantalles OLED.
• Dona un aspecte modern i tecnològic al projecte.
• Millora l’accessibilitat per a usuaris amb sensibilitat a la llum.

Em d'afegir el JavaScript per activar/desactivar el mode fosc amb aquest botó. 

Una funció clara, eficient i amb un toc visual gràcies al canvi d’icona. Per desactivar-lo temporalment, s'ha de comentar tot el <script> amb   <!-- <script> ..... </script> --> 

📝 <script> Comentat  (amb comentaris explicatius)

<script>
    // Funció per activar/desactivar el mode fosc
    function toggleDarkMode() {
        // Alterna la classe 'dark-mode' al cos del document
        document.body.classList.toggle('dark-mode');

        // Selecciona la icona dins del botó de mode fosc
        const toggleIcon = document.querySelector('.dark-mode-toggle i');

        // Canvia la icona segons l'estat actual
        if (document.body.classList.contains('dark-mode')) {
            toggleIcon.classList.remove('fa-moon'); // treu la lluna
            toggleIcon.classList.add('fa-sun');     // posa el sol
        } else {
            toggleIcon.classList.remove('fa-sun');  // treu el sol
            toggleIcon.classList.add('fa-moon');    // posa la lluna
        }
    }
</script>

🛑 Comentat <!-- <script> --> completament (per desactivar-lo temporalment)

<!--
<script>
    function toggleDarkMode() {
        document.body.classList.toggle('dark-mode');
        const toggleIcon = document.querySelector('.dark-mode-toggle i');
        
        if (document.body.classList.contains('dark-mode')) {
            toggleIcon.classList.remove('fa-moon');
            toggleIcon.classList.add('fa-sun');
        } else {
            toggleIcon.classList.remove('fa-sun');
            toggleIcon.classList.add('fa-moon');
        }
    }
</script>
-->

Si es vol  es pot fer que el mode fosc es recordi entre sessions (amb localStorage), o que s’activi automàticament segons l’hora del dia o preferències del sistema. Personalment no ho recomano al semblar una invasió a la decisió del usuari