Como - Alternar o modo escuro
Alterne entre o modo escuro e claro com CSS e JavaScript.
Alternar classe
Etapa 1) Adicionar HTML:
Use qualquer elemento que deva armazenar o conteúdo para o qual você deseja alternar o design. Em nosso exemplo, usaremos <body>
para simplificar:
Exemplo
<body>
Etapa 2) Adicionar CSS:
Estilize o <body>
elemento e crie uma .dark-mode
classe para alternar:
Exemplo
body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}
.dark-mode {
background-color: black;
color: white;
}
Etapa 3) Adicione JavaScript:
Obtenha o <body>
elemento e alterne entre a .dark-mode
classe:
Exemplo
function myFunction() {
var element =
document.body;
element.classList.toggle("dark-mode");
}
Dica: consulte também Como adicionar uma classe .
Dica: Saiba mais sobre a propriedade classList em nossa Referência JavaScript.