This website collects cookies to deliver better user experience
Uma saída para a adição de Dark Mode.
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 xDconst alteraTema =document.querySelector('nomeDoSeuAlterador')// Então vamos adicionar um evento à elealteraTema.addEventListener('change',()=>{})
Segunda etapa
Primeiro vamos criar uma função assim
constdarkMode=()=>{}// 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
constdarkMode=()=>{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
constdarkMode=()=>{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?