Markdown

Uma aplicação web leve, responsiva e performática desenvolvida para alternar dinamicamente entre os modos Claro (Light Mode) e Escuro (Dark Mode), garantindo a persistência da preferência do usuário via localStorage.

• Visão Geral
• Funcionalidades
• Tecnologias Utilizadas
• Estrutura do Projeto
• Como Funciona
• Como Executar o Projeto
• Como Personalizar
• Como Contribuir
• Licença
• Autor

O Theme Switch foi desenvolvido por Rafael para demonstrar a implementação limpa de controle de temas web. O projeto utiliza variáveis CSS nativas (custom properties) combinadas com a API do localStorage do navegador para memorizar a escolha do usuário entre sessões e recarregamentos de página.

• Alternância Dinâmica: Troca instantânea de temas com um único clique.
• Persistência no Navegador: Salva o estado do tema via localStorage.
• Animações e Transições: Efeitos visuais suaves na transição de cores e ícones.
• Design Responsivo: Adaptado para dispositivos móveis, tablets e telas de alta resolução.
• Acessibilidade (a11y): Marcação semântica com suporte para navegação via teclado.

🧠 Como Funciona Definição de Variáveis CSS (style.css):

As cores da aplicação são centralizadas no arquivo CSS através da pseudo-classe :root e de uma classe .dark-mode.

CSS :root { --bg-color: #ffffff; --text-color: #121212; }

body.dark-mode { --bg-color: #121212; --text-color: #ffffff; }

Ao carregar a página, o script verifica se existe uma preferência salva no localStorage: Se existir, aplica a classe .dark-mode ao elemento correspondente. Ao clicar no botão de alternância, o estado é alterado e a nova preferência é salva instantaneamente.

Você pode rodar este projeto localmente de diferentes maneiras:

Pré-requisitos Um navegador web moderno (Google Chrome, Mozilla Firefox, Microsoft Edge, Safari, Opera). (Opcional) Git instalado no seu computador. (Opcional) Extensão Live Server no VS Code.

Opção 1: Execução Direta no Navegador (Mais Simples) Clone o repositório:

Bash git clone https://github.com/rafael101003/Theme_Switch.git Entre na pasta do projeto:

Bash cd Theme_Switch Abra o arquivo principal: Dê um duplo clique no arquivo index.html. O projeto será aberto diretamente no seu navegador padrão.

Opção 2: Utilizando o VS Code + Live Server Abra o VS Code. Clone ou abra a pasta do projeto (File > Open Folder...). Certifique-se de ter a extensão Live Server instalada. Clique com o botão direito no arquivo index.html e selecione "Open with Live Server". O projeto abrirá no endereço local http://127.0.0.1:5500.

Opção 3: Servidor Local via Terminal Se preferir rodar através de um servidor HTTP local: Usando Python (3.x): Bash python -m http.server 8080 Acesse http://localhost:8080 no seu navegador.

Usando Node.js / npx: Bash npx serve Siga o endereço exibido no terminal (geralmente http://localhost:3000).

Para modificar as cores do tema claro ou escuro: Abra o arquivo style.css. Altere os valores hexadecimais ou RGB presentes na seção :root (Tema Claro) e body.dark-mode (Tema Escuro):

CSS /* Exemplo de personalização */ :root { --bg-color: #f4f6f8; --text-color: #2c3e50; --accent-color: #007bff; }

body.dark-mode { --bg-color: #0f172a; --text-color: #f8fafc; --accent-color: #38bdf8; }

Contribuições são super bem-vindas! Para contribuir:

Faça um Fork do projeto. Crie uma branch para a sua feature/correção:

Bash git checkout -b feature/minha-nova-feature Faça o Commit das suas alterações com mensagens claras:

Bash git commit -m "feat: adiciona nova paleta de cores para o tema escuro" Envie as alterações para o seu repositório remoto:

Bash git push origin feature/minha-nova-feature Abra um Pull Request para análise.

Este projeto está sob a licença MIT. Veja o arquivo LICENSE no repositório para mais detalhes.

👤 Autor Desenvolvido por Rafael 🚀

GitHub: @rafael101003

Repositório do Projeto: Theme_Switch

Theme_Switch/
│
├── index.html # Estrutura HTML e elementos do alternador
├── style.css # Variáveis CSS para temas Light/Dark e layout
├── script.js # Lógica JavaScript para troca de tema e localStorage
└── README.md # Documentação completa do projeto