Fiz esse projeto na própria Dio usando como base as aulas do instagram clone, então fiz um a acréscimo do modo escuro na página. Nesse projeto eu fiz uso de variáveis CSS para não precisamos sempre reescrever as cores toda vez que que precisarmos delas . Nesse artigo eu busquei fazer uma descrição do que fiz para mudar as cores da pagina. Dicas sugestões de melhorias, serei muito grato .
1.Criando o input a div que receberá a funcionalidade.
Primeiro criei um input do tipo checkbox depois um id e uma classe, que no caso nomeie de “active-dark-mode” , depois criei uma div que irá receber o dark-mode, dentro da div criei uma label com o “for” que recebe o nome do id pertencente ao input criado anteriormente para fazer uma referência, então quando clicarmos nela irá mudar a as cores da página .
2. Criando o estilo dark-mode.
Após ter criado a div e nomeá-la criei uma classe chamada dark-mode.css, reatribui novos valores as variáveis já existente para mudar as cores da página. Outro detalhe é o significado desse “~”, ele irá selecionar qualquer classe que vier após a sua chamada, no caso ele executada após o clique no input
3.Criando a ação na mudança de ícone da lampada.
Criei um no arquivo JS a atribui um nome a ele nesse caso atribui um nome de acordo com a funcionalidade do script change-image.js , criei uma função expression que irá executar o evento de onclick() no id selecionado . No meu if usei um método chamando match() , também podemos usar o includes() para encontrar uma strings , no caso eu precisava encontrar uma String que fazia referencia ao nome da imagem inicial da página , então o if que basicamente troca a imagem quando ela existe caso não exista ele inverte para anterior .
Referências:
Faça parte da nossa comunidade!
Domine as tecnologias utilizadas pelas empresas mais inovadoras do mundo e encare seu novo desafio profissional, evoluindo em comunidade com os melhores experts.
