Dark Mode com CSS: Simples, Rápido e Fácil

Aprenda a maneira mais fácil de implementar Dark Mode com CSS e veja como é muito rápido implementar no seu site.

Dark Mode é um assunto que, com o tempo, vem ganhando cada vez mais atenção, destaque e estudos — não por acaso, pois esse modo escuro tem sim sua importância em UX e UI.

Como em quase tudo o mundo de desenvolvimento web, existem muitas possibilidades e técnicas para a implementação de tal recurso em um site ou app.

Neste vídeo, veja a maneira mais fácil de implementar Dark Mode com CSS!

💬 Entre na comunidade exclusiva dpw para conversar sobre o conteúdo deste vídeo

Com atenção ao fato de que abordaremos estritamente a maneira mais simples de se implementar, não as melhores práticas para um dark mode de qualidade (que pode ser assunto para um outro vídeo; se quiser, comentaê).

✏️ Dark Mode com CSS: o jeito mais fácil

➡️ Basic Front Boilerplate (BFB)

➡️ O Básico de Sass para se Virar nas Webs

==========

Mano, sensacional! Parabéns mesmo. Quebrei cabeça aqui por alguns dias, estava preocupado com o meu prazo para entregar este recurso no site. Você ganhou mais um seguidor. Deus o abençoe imensamente.

[chestera]

Nunca tinha ouvido falar de :root na vdd tive q ver o vídeo 2x pq não conhecia nada e consegui entender tudo, mto bom!

[vivians]

rápido, prático, simples e sem enrolação, vlw d+!

[andersonalmeida]

Cara, o canal é bom demais... Já aproveito para agradecer o toque do placeholder loading, muito útil 👍

[oliveira-oj]

Top! Simples e funcional! É o melhor canal de wev development aqui no YT.

[firminor.massango]

Quem teve a coragem de dar deslike? O vídeo é muito bom!

[bpavanellic]

Muito bom! Vou pesquisar e aprender primeiro sobre as variaveis CSS. Mas muito legal, simples e intuitivo.

[TheIguanad]

Simples, fácil e objetivo, muito obrigado por compartilhar esse conhecimento

[douglasfraporti]

Conheci o canal hoje e gostei bastante, muita qualidade nao sou dev mas gosto de brincar com front vez ou outra, sucesso

[josezayamateusmateus]

É incrível este canal, eu pessoalmente aprendo muito com os tutoriais.

[pablin_teixeira]

Obrigado pelo vídeo, estava procurando sobre como fazer o switch estilizado, mas acabei vendo algo melhor que seria a dica do root, valeu!

[thfields]

Obrigado!!! Direto, rápido e prático!

[salvimateus]

MEU SENHOR, que tecnica perfeita,
ia começar a fazer um dark-mode essa semana, que bom que descobri antes de começar XD

[oroHAWW]

cara perfeito hem!
vc so poderia da o RAW do codigo (ou subir os arquivos pra copia) pra gente copiar hem ficaria muito mais facil pra fazer os teste, ter q ficar pausando o video e digitando conferindo se nao comeu uma letra é brabo rs...rs....
parabens salvou minha vida com seu video!!!

[Debby_xD]

Simplesmente sensacional ! Gratidão pelo conteúdo

[well_mtb]

Ótimo vídeo amigo, me ajudou bastante! Porém, senti falta de explicações de como salvar o status do dark-mode... Seria ótimo aprender isso com a sua didática. Um abraço!

[christianluis]

Muito bom o codigo, rapido e limpo. Parabéns

[PedroHenrique-vwiy]

Tarcio. Ótimo trabalho, incrivel sua didática!! Você pode me tirar uma dúvida ? Que simbolo que você usa pra chamar o pseudo elemento (?):hover dentro da classe no css... achei bem legal, evita reescrever a classe:hover... Obrigado!!

[sarahpires]

Perfeito! Mais uma inscrita. Muito obrigada!

Que aula incrível. Meus parabéns pela didática +1 inscrito