Reencontro com a página
A página de perfil da Ana Souza está de volta, pela terceira vez. Ela nasceu no HTML, ganhou cor e layout no CSS, e agora é a vez do JavaScript entrar em cena.
Estudar esta lição interativa →Se você fez os cursos de HTML e CSS deste site, esta página já é velha conhecida: é o perfil da Ana Souza, que você montou peça por peça no curso de HTML (header, seção "sobre mim", projetos, formulário de contato) e depois vestiu de roupa nova no curso de CSS (cores, Flexbox, Grid, estados de hover). Chegou a hora da terceira etapa dessa mesma jornada: dar comportamento a ela com o JavaScript que você aprendeu nos módulos anteriores deste curso.
E se você não fez os cursos de HTML e CSS? Sem problema nenhum: este módulo é autocontido. Toda página que você precisa já vem pronta, em HTML e CSS completos, dentro de cada exemplo. O seu trabalho aqui é só o JavaScript, que é justamente o que este curso te ensinou até agora.
Pense nesta página como uma casa: o HTML ergueu as paredes e os cômodos (a estrutura), o CSS pintou, decorou e organizou os móveis (a aparência), e agora falta a parte que faz a casa parecer habitada: as luzes que acendem quando alguém aperta o interruptor, a campainha que toca, a porta que abre. É exatamente isso que o JavaScript faz com uma página pronta: não muda a estrutura nem a decoração, faz tudo reagir.
Nosso primeiro comportamento é um clássico de qualquer site moderno: um botão que alterna entre tema claro e tema escuro. A receita é a mesma que você já usa desde o Módulo 7, um addEventListener escutando o clique, só que agora a reação é ligar e desligar uma classe CSS chamada dark no body da página, usando o método classList.toggle(): se a classe não está lá, ele adiciona; se já está, ele remove. Um clique "vira a chave" para o lado oposto de onde ela estava. Toda a aparência do tema escuro (cores de fundo, cores de texto) já está pronta no CSS, esperando só por essa classe.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Clique no botão 'Tema escuro' no canto do cabeçalho e veja a página inteira reagir.
Um erro comum é usar classList.add("dark") pensando que ele vai "ligar e desligar": não vai, add só garante que a classe esteja presente (se ela já estiver lá, não faz nada) e nunca a tira. Se você quer alternar entre dois estados com um único botão, o método certo é o toggle(). Guarde os três: add() sempre liga, remove() sempre desliga, toggle() inverte o estado atual.