Uma saída para a adição de Dark Mode.

Minha recém experiência com dark mode
Em meu ultimo projeto que fiz que pode ser encontrado aqui.
Eu me coloquei na situação de utilizar e construir um dark mode para a minha aplicação, sendo essa minha primeira vez e vi que existem diversas maneiras de fazer isso, então resolvi mostrar a que eu achei, e achei deveras 'fácil' de implementar:
Passo a passo desta utilização
Primeira etapa
Pegar o elemento que irá causar o evento de troca de temas para o js (DOM)
// Pode ser um input de toggle ou um botão, o que você achar melhor xD
const alteraTema = document.querySelector('nomeDoSeuAlterador')

// Então vamos adicionar um evento à ele
alteraTema.addEventListener('change', () => {})
Segunda etapa
Primeiro vamos criar uma função assim
const darkMode = () => {} // Podendo ser arrow function ou não, vai da sua escolha
Terceira etapa
Depois vamos criar uma variável e pagar o elemento body da aplicação
const darkMode = () => {
    var element = document.body // O nome da variável pode ser qualquer um da sua escolha
}
Quarta e ultima etapa
Vamos adicionar uma classe para o body da nossa aplicação podendo assim estilizar ela com o tema dark e usar o um botão para a troca de temas
const darkMode = () => {
    var element = document.body
    element.classList.toggle("dark-mode")
}
Considerações finais
Em minha opinião achei bem simples de fazer essa parte da aplicação e deixo aqui pra vocês trazerem mais meios de fazer essa adição do tema dark, quais métodos vocês usam?

16

This website collects cookies to deliver better user experience

Uma saída para a adição de Dark Mode.