Página estática com um theme switcher centralizado na tela, ou seja, um botão que permite trocar as cores de um site com tonalidades claras para tonalidades escuras. Projeto desenvolvido como desafio durante o Discover, que é um programa promovido pela @Rocketseat voltado para o ensino de programação web para iniciantes.
- Trocar de tema de cores tanto do texto quando do background da página ao clicar no switcher
- Ter uma transição entre um ícone de sol (representando o tema light) e um de lua (representando o tema dark)
- Armazenar o tema atual no local storage, de modo que as cores permaneçam na página mesmo se usuário regarregar a página
Esse projeto foi desenvolvido com as seguintes tecnologias:
✔️ JavaScript
✔️ CSS
✔️ HTML
Embora não seja obrigatório, para rodar a aplicação de uma forma mais prática, é bom ter o editor de código VSCode junto com a extensão Live Server, que pode ser instalada no marketplace do próprio VSCode.
# Clone este repositório no terminal/cmd
$ git clone https://github.com/JohnPetros/theme-switcher.git
# Acesse a pasta do projeto
$ cd theme-switcher
# Abra a pasta no VSCode
$ code .
# Execute o arquivo index com a extensão Live Server, clicando com o botão direito sobre ele e depois em Open with Live Server
O deploy desse projeto foi realizado através do Github Pages. Isso implica que você pode acessar o projeto funcionando acessando esse link
No link abaixo você encontra o layout do projeto feito pela equipe da Rocketseat. Lembrando que você precisa ter uma conta no Figma para acessá-lo.
Esse projeto está sob a licença MIT. Veja o arquivo LICENSE para mais detalhes.
Feito com 💜 by John Petros 👋🏻