Aula HTML / CSS / Javascript

 body {

    font-family: Arial, sans-serif;

    background-color: ##87CEFA;

    color: #333;

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

    margin: 0;

    transition: 0.3s;

}

.card {

    background: white;

    padding: 30px;

    border-radius: 12px;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

    text-align: center;

    width: 300px;

}

button {

    background-color: #6366f1;

    color: white;

    border: none;

    padding: 10px 20px;

    border-radius: 6px;

    cursor: pointer;

    font-size: 16px;

    margin-top: 15px;

    transition: 0.2s;

}

button:hover {

    background-color: #4f46e5;

}

.dark-mode {

    background-color: #000000;

    color: #f8fafc;

}

.dark-mode .card {

    background-color: #000099;

    color: #f8fafc;

}

<!DOCTYPE html>

<html lang="pt-BR">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Aula Rápida de JS</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="card">

<h2 id="titulo">Olá, Turma! 🚀</h2>

<p>Clique no botão para mudar o visual da página.</p>

<button id="btnTema">Mudar Tema</button>

</div>

<script src="script.js"></script>

</body>

</html>

// Seleciona os elementos do HTML pelo ID ou tag

const botao = document.getElementById("btnTema");

const titulo = document.getElementById("titulo");

const corpo = document.body;

// Adiciona um ouvinte de clique no botão

botao.addEventListener("click", function () {

    // Alterna a classe no body

    corpo.classList.toggle("dark-mode");

    // Troca o texto do título dependendo da classe atual

    if (corpo.classList.contains("dark-mode")) {

        titulo.innerText = "Modo Escuro Ativo 🌙";

    } else {

        titulo.innerText = "Olá, Turma! 🚀";

    }

});