Come fare per - Attiva/disattiva la modalità oscura
Passa dalla modalità scura a quella chiara con CSS e JavaScript.
Attiva/Disattiva classe
Passaggio 1) Aggiungi HTML:
Usa qualsiasi elemento che dovrebbe memorizzare il contenuto per il quale desideri attivare il design. Nel nostro esempio useremo <body>
per semplicità:
Esempio
<body>
Passaggio 2) Aggiungi CSS:
Modella l' <body>
elemento e crea una .dark-mode
classe per toggle:
Esempio
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
Passaggio 3) Aggiungi JavaScript:
Ottieni l' <body>
elemento e passa da una .dark-mode
classe all'altra:
Esempio
function myFunction() {
var element =
document.body;
element.classList.toggle("dark-mode");
}
Suggerimento: vedi anche Come aggiungere una classe .
Suggerimento: scopri di più sulla proprietà classList nel nostro JavaScript Reference.