Criando Dark Mode

    <h1>Bem-vindo ao Breviares</h1> <!-- Título principal da página -->
    <p>Demonstrando o dark mode.</p> <!-- Descrição explicativa -->
    <!-- Botão que vai controlar a troca de modo -->
    <button id="toggle-button">
        <i id="mode-icon" class="fas fa-sun"></i> <!-- Ícone de sol inicial (representando o modo claro) -->
    </button>

       /* Estilos do corpo da página para o modo claro */
        body {
            background-color: #fff; /* Cor de fundo branca */
            color: #333; /* Cor do texto preta */
            font-family: Arial, sans-serif; /* Define a fonte */
            padding: 20px; /* Adiciona um espaçamento ao redor do conteúdo */
        }

        /* Estilos para o modo escuro, ativados quando a classe 'dark-mode' é adicionada */
        body.dark-mode {
            background-color: #333; /* Cor de fundo escura para o modo dark */
            color: #fff; /* Cor do texto branca para o modo dark */
        }

        /* Estilização do botão para alternar o modo */
        #toggle-button {
            font-size: 24px; /* Tamanho do ícone */
            background-color: #f0f0f0; /* Cor de fundo do botão */
            color: #333; /* Cor do ícone */
            border: 2px solid #ccc; /* Borda do botão */
            width: 50px; /* Largura do botão */
            height: 50px; /* Altura do botão */
            border-radius: 50%; /* Torna o botão redondo */
            padding: 10px; /* Adiciona preenchimento dentro do botão */
            cursor: pointer; /* Torna o cursor em uma mãozinha (indicando que é clicável) */
            transition: background-color 0.3s ease, transform 0.3s ease; /* Transição suave para mudança de cor e tamanho */
            outline: none; /* Remove o contorno padrão do botão */
        }

        /* Efeito de hover (quando passa o mouse por cima) */
        #toggle-button:hover {
            background-color: #ddd; /* Cor de fundo mais escura */
            transform: scale(1.1); /* Aumenta o tamanho do botão levemente */
        }

        /* Efeito quando o botão recebe o foco (ex. quando clicado) */
        #toggle-button:focus {
            border-color: #007bff; /* Altera a cor da borda quando o botão é focado */
        }

        /* Efeito de transição no ícone (lua/sol) */
        #mode-icon {
            transition: color 0.3s ease; /* Transição suave para a troca de cor do ícone */
        }

        /* Estilização para o modo dark (quando a classe 'dark-mode' é ativada) */
        body.dark-mode #toggle-button {
            background-color: #444; /* Cor de fundo mais escura para o botão no modo escuro */
            border-color: #666; /* Borda mais escura no modo escuro */
            color: #fff; /* Cor do ícone branca no modo escuro */
        }

        body.dark-mode #toggle-button:hover {
            background-color: #555; /* Cor de fundo mais escura no hover, no modo escuro */
        }

        // Seleciona o botão, o corpo da página e o ícone do modo
        const toggleButton = document.getElementById('toggle-button');
        const body = document.body;
        const modeIcon = document.getElementById('mode-icon');

        // Verifica se existe uma configuração salva para o 'darkMode' no localStorage
        const darkMode = localStorage.getItem('darkMode');
        // Se o modo escuro estiver ativado previamente, aplica as classes e troca o ícone

        if (darkMode) {
            body.classList.add('dark-mode'); // Ativa a classe 'dark-mode' no body
            modeIcon.classList.remove('fa-sun'); // Remove o ícone de sol
            modeIcon.classList.add('fa-moon'); // Adiciona o ícone de lua
        }

        // Adiciona um evento de clique no botão para alternar entre os modos
        toggleButton.onclick = function() {
            body.classList.toggle('dark-mode'); // Alterna a classe 'dark-mode' no body
            // Alterna os ícones dependendo do modo ativo
            if (body.classList.contains('dark-mode')) {
                modeIcon.classList.remove('fa-sun'); // Remove o ícone de sol
                modeIcon.classList.add('fa-moon'); // Adiciona o ícone de lua
            } else {
                modeIcon.classList.remove('fa-moon'); // Remove o ícone de lua
                modeIcon.classList.add('fa-sun'); // Adiciona o ícone de sol
            }

            // Salva a preferência do usuário no localStorage para persistir entre recarregamentos
            localStorage.setItem('darkMode', body.classList.contains('dark-mode'));
        }