Toggle de Dark Mode com TailwindCSS

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.

🔨 Requisitos

• 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!

🔍 Dicas

• 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.

🎨 Inspiração de Design

🔗 Link para o Figma com o Design Sugerido

💡 Inspiração

Confira estes exemplos para se inspirar na implementação do Toggle de Dark Mode:

• Site do Josh Comeau
• Site do Codante
• O toggle mais satisfatório do mundo