Projeto Toggle de dark mode animado

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

Assistir agora

1. Apresentando o Toggle

Todos os nossos projetos são gratuitos, porém os tutoriais são exclusivos para membros do Codante PRO. Algumas aulas estão abertas para você experimentar.

Se gostar, considere assinar para ter acesso a todos os tutoriais e apoiar o projeto!

Seu Instrutor

Ícaro Harry

Codante.io

Fundador e Professor no Codante.io.

Dev front-end com 9 anos de experiência no Brasil e no exterior. Professor e mentor há mais de 3 anos, tendo ajudado mais de 600 pessoas a iniciarem suas carreiras na programação.

Aulas

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

Projeto Toggle de dark mode animado

Assistir agora

Seu Instrutor

Ícaro Harry

Aulas

Apresentando o Toggle

Iniciando o projeto

Montando a estrutura do HTML

Iniciando a estilização do toggle

Fazendo o toggle se mexer

Implementando o dark mode do TailwindCSS

Suavizando a mudança de tema com transições

Transições e Animações com Tailwind

Resolvendo um pequeno bug

Animação apenas com o clique

Adicionando som no toggle

Como evitar que a tela pisque no dark mode

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