Projeto Toggle de dark mode animado

Crie um toggle de dark mode com animação suave usando o framework de CSS Tailwind.

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

image

💡 Inspiração

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

Tutorial

Capa do tutorial (thumbnail)

Junte-se a outras 65 pessoas que estão fazendo esse mini projeto.

Avatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuárioAvatar do usuário