Você descobriu que a luz azul emitida pelo monitor pode atrapalhar o sono das pessoas. Com você se preocupa com o bem-estar das pessoas que usam seu app, você decidiu implementar um switch entre dark mode e light mode na sua aplicação. Sua sorte é que você estava usando TailwindCSS, então seu trabalho vai ser muito mais prazeroso.
Neste mini projeto, você terá a oportunidade de explorar os recursos do Tailwind CSS para implementar um toggle de dark mode elegante e interativo.
- Implemente um Toggle de Dark Mode que permita aos usuários alternar entre os modos claro e escuro da interface.
- Utilize as classes do Tailwind CSS para estilizar o Toggle e os elementos relacionados.
- Adicione animações e transições para fornecer uma experiência agradável ao alternar entre os modos.
- Adicione um som ao clicar no toggle.
- Use a criatividade para construir uma experiência única. Temos uma sugestão de design disponível, mas esse é um mini-projeto que vale a pena deixar a criatividade fluir!
- Verifique a documentação do Tailwind sobre como implementar o dark mode.
- Garanta que sua aplicação não "pisque" ao recarregar a página. Um problema comum ao implementar o dark mode é que quando o padrão é o modo claro, mas a pessoa salvou a preferência do modo escuro, a aplicação "pisca" ao transicionar do modo claro para o modo escuro.
🔗 Link para o Figma com o Design Sugerido
Confira estes exemplos para se inspirar na implementação do Toggle de Dark Mode: