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?
Top comments (0)