Benvenuto nella Modalità Cambia Colori
Clicca il pulsante per attivare o disattivare la modalità scura.
Ecco un esempio di collegamento che cambia colore in modalità scura.
PROVA
BACKGROUND FREE
Come funziona? Semplicissimo!
In struttura modello metti la trasparenza su tutti i break-point sul contenuti di pagina.
Su una tua pagina test del tuo sito inserisci un oggetto HTML 
e sotto un oggetto testo 
con all'interno una tua frase.
e sotto un oggetto testo con all'interno una tua frase.Fai doppio click sull'oggetto HTML e su CODICE inserisci il listato che segue. Alla fine salva tutto.
Codice Aggiornato il 23.03.2025
INSERISCI IN "CODICE" DELL'OGGETTO HTML | ||
<style> /* Stile iniziale della pagina */ body { background-color: white !important; color: black !important; font-family: Arial, sans-serif; transition: background-color 0.3s ease, color 0.3s ease; } /* Modalità scura */ .dark-mode { background-color: #222 !important; color: white !important; } /* Forza il colore bianco su tutti i testi */ .dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6, .dark-mode p, .dark-mode span, .dark-mode a, .dark-mode li, .dark-mode div { color: white !important; } /* Cambia colore ai link in modalità scura */ .dark-mode a { color: lightblue !important; } /* Pulsante per cambiare i colori */ .toggle-button { margin: 20px auto; display: block; padding: 10px 20px; background-color: #333; color: white; border: none; border-radius: 5px; cursor: pointer; font-size: 16px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); transition: background-color 0.3s ease; } .toggle-button:hover { background-color: #555; } </style> <h1>Benvenuto nella Modalità Cambia Colori</h1> <p>Clicca il pulsante per attivare o disattivare la modalità scura.</p> <p>Ecco un esempio di <a href="#">collegamento</a> che cambia colore in modalità scura.</p> <button class="toggle-button">Toggle Dark Mode</button> <script> document.addEventListener("DOMContentLoaded", function() { const button = document.querySelector(".toggle-button"); button.addEventListener("click", function() { document.body.classList.toggle("dark-mode"); }); }); </script> |