Como alternar para o modo escuro

Use CSS e JavaScript para alternar entre o modo escuro e claro.

Experimente pessoalmente

Alternar classe

Primeiro passo - Adicionar HTML:

Use qualquer elemento para armazenar o conteúdo que você deseja alternar de design. Em nosso exemplo, para simplificar, usaremos <body>:

<body>

Segundo passo - Adicionar CSS:

configurar <body> estilos do elemento e criar um botão de alternância .dark-mode classe:

body {
  margem: 25px;
  cor de fundo: branco;
  cor: preto;
  tamanho da fonte: 25px;
}
.dark-mode {
  cor de fundo: preto;
  cor: branco;
}

Terceiro passo - Adicionar JavaScript:

Obter <body> elemento e em .dark-mode Alternância entre classes:

function myFunction() {
  var element = document.body;
  element.classList.toggle("dark-mode");
}

Experimente pessoalmente

Páginas relacionadas

Tutorial:Como adicionar uma classe

Manual de referência:A propriedade classList do elemento DOM HTML