Seu post está muito bem escrito e organizado! Aqui está a verificação ortográfica para garantir a correção gramatical:
Nesse exemplo, teremos uma página HTML em branco com um botão que fará a ação de adicionar o Dark mode caso já não tenha sido adicionado e remoção do Dark mode caso já esteja ativado.
Passo 1 - Estrutura do HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Mode Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h1>Dark Mode Example</h1>
<p>Click the button to toggle dark mode.</p>
<button id="darkModeToggle">Toggle Dark Mode</button>
</div>
<script src="script.js"></script>
</body>
</html>
Aqui temos uma estrutura de HTML simples apenas com uma div de classe "container", contendo apenas um título, um texto e um botão que fará a ação de adicionar e remover o Dark mode da página.
Passo 2 - Estilização do Dark Mode
body {
background-color: #f5f5f5; /* Cor de fundo para o modo claro */
color: #333; /* Cor do texto para o modo claro */
transition: background-color 0.3s, color 0.3s;
}
body.dark-mode {
background-color: #333; /* Cor de fundo para o modo escuro */
color: #f5f5f5; /* Cor do texto para o modo escuro */
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
No arquivo styles.css, que vai a estilização da nossa página, criamos uma classe chamada dark-mode. É nessa classe que declaramos os estilos do nosso Dark mode como cor de fundo escura, texto mais claro, etc.
Passo 3 - Evento de click para a troca de tema
const darkModeToggle = document.getElementById('darkModeToggle');
const body = document.body;
darkModeToggle.addEventListener('click', () => {
body.classList.toggle('dark-mode');
});
Dentro do arquivo script.js, definimos uma variável chamada body com a instância do elemento body do HTML. Além disso, pegamos o elemento do botão que definimos no HTML e atribuímos à variável darkModeToggle. Através dessa variável, adicionamos o evento de click no botão, executando uma função toda vez que o usuário clicar nele.
Já na função do evento de click, usamos a variável body que definimos mais cedo para chamar a propriedade classList, que contém uma série de funcionalidades para manipular a lista de classes de um elemento.
Dentro da propriedade classList, temos o método toggle que adiciona uma certa classe caso o elemento não tenha ela e remove se o elemento já estiver com essa determinada classe atribuída.
Assim, toda vez que o botão for clicado, adicionará a classe dark-mode ao elemento body se ela não estiver atribuída ou removerá caso ela já esteja atribuída ao elemento.
Top comments (0)