ฝัง
- เผยแพร่เมื่อ 26 ก.ค. 2020
- 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
/ discord
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ê).
Para saber como manter a configuração de Dark Mode mesmo depois de recarregar a página, assista ao nosso tutorial sobre cookies com JavaScript: • Cookies em JavaScript ...
✏️ Dark Mode com CSS: o jeito mais fácil
desenvolvimentoparaweb.com/cs...
➡️ Basic Front Boilerplate (BFB)
• Basic Front Boilerplat...
➡️ O Básico de Sass para se Virar nas Webs
• O Básico de Sass para ...
➡️ dpw expo #23 - Frappe Charts, Darkmode.js, Eva Design System
• dpw expo #23 - Frappe ...
==========
Assine o canal! bit.ly/dpw-youtube
- Facebook: / desenvolvweb
- Instagram: / desenvolvweb
- Twitter: / desenvolvweb
Conheça o blog desenvolvimento para web: desenvolvimentoparaweb.com/
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.
vlwww 🙏
Top! Simples e funcional! É o melhor canal de wev development aqui no YT.
Opa! Será?! Hehehe
Muito obrigado e grande abraço!
rápido, prático, simples e sem enrolação, vlw d+!
Disponha!
Quem teve a coragem de dar deslike? O vídeo é muito bom!
#inveja
É incrível este canal, eu pessoalmente aprendo muito com os tutoriais.
Muito obrigado, Jose. De verdade. :)
Simples, fácil e objetivo, muito obrigado por compartilhar esse conhecimento
Eu que agradeço o feedback. o/
Cara, o canal é bom demais... Já aproveito para agradecer o toque do placeholder loading, muito útil 👍
Opa, eu que agradeço pelo comentário, Anderson! Abraços.
Simplesmente sensacional ! Gratidão pelo conteúdo
Tamos aê. :)
Sensacional!
Explicação clara e objetiva. Pena que só da pra dar um like!
Dá para enviar para os devs que você conhece para darem like, também. x)
Perfeito! Mais uma inscrita. Muito obrigada!
Eu que agradeço, Sarah.
Cara que simples, muito obrigado!!!!
Muito facinho, né? Haha
Eu que agradeço pela participação.
Que aula incrível. Meus parabéns pela didática +1 inscrito
Vlw, Douglas!
Esse canal é top. Estou aprendendo muito.
Vlw, Matheus!
Ativa o sininho para receber todos os vídeos primeiro. 😉
Muito bom! Vou pesquisar e aprender primeiro sobre as variaveis CSS. Mas muito legal, simples e intuitivo.
Aqui tem um artigo em nosso blog para te ajudar: desenvolvimentoparaweb.com/css/variaveis-css-guia-pratico/
Excelente vídeo! Como de costume nota 10!
Aí sim! 😃
Muito top o conteúdo. Já me ajudou várias vezes nos meus projetos.
Fico feliz em saber, Alexandre. Aplicar na prática que é bom! ;)
Conheci o canal hoje e gostei bastante, muita qualidade nao sou dev mas gosto de brincar com front vez ou outra, sucesso
Muito obrigado, Douglas! Espero que o canal ajude nas brincadeiras. =P
Excelente, parabéns!
Obrigado 😃
Muito bom o codigo, rapido e limpo. Parabéns
Obrigado, Christian! o/
Vlw irmão, suas dicas me ajudaram muito. + Um inscrito
Eu que agradeço a confiança, Marcio.
Muito bom, obrigada!
De nada. :)
Show de bola! Parabéns
Obrigado, Eric. Vlwww
Nossa muito bom os vídeos do seu canal.
Muito obrigado, Hains! :D
Ótimo conteúdo!! me ajudou demais!!
Maravilha, Robert. Volte sempre. :)
Realmente mando muito bem nesse vídeo.
Vlw, Fernando! :D
vou implementar 👍🏻 valeu mano
vlwww
muito bom, adorei
Opa, que bom que gostou. :)
Método incrível!!!
Vlw, Kauã! 👊
Muito obrigado!
De nada.
muito bom, parabéns e obrigado
Eu que agradeço pela participação, Romeci! :)
Excelente aula parabéns !!!!!1
Vlw, Fred! 😃
Obrigado!!! Direto, rápido e prático!
👊
Excelente trabalho, já me inscrevi no canal e já notei que existe muito conteúdo pra ajudar no desenvolvimento web. Obrigado pelo conteúdo, vai me ajudar muito!
@@thfields Eu que agradeço pela confiança! 👊
Genial!!
B-)
valeu, explicou bem demais :D
vlw, brow!
INACREDITÁVEL de tão maravilhoso
Haha obrigado, Gabi! Muito obrigado mesmo! o/
@@dpwoficial eu que agradeço! me ajudou muito num projeto
@@Gabi-bg9kg o/
Caramba explica bem em parabéns...
Opa, brigadão. :D
top demais!!
vlwww
até me inscrevi aqui, bom demais
vlwww
Espetacular!
Muitíssimo obrigado, Jairo! :D
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!
Boa, Lee.
E o vídeo está aí, à disposição, caso queira reassistir mais vezes. 👊
muito bom, mano!
Muito obrigado, mano!
seus videos são muitos bons
Vlw, mesmo!
Botei fé hahaha
Nóis. B-)
Sensacional!
Vlw, Allan!
brabo d+
vlw
Muito top!!!
Vlw, Johnny!
Muitoooo bom !!!!
Vlwww, Thiago! :D
Amei
Muito top
Vlw, Daniel! o/
Obrigado monstro sagrado, aprendi fazer dark-mode e aprendi a usar a palavra manutenir em situações.
Aqui trabalhamos com a norma culta da língua portuguesa. 👍
Mto bom! Ganhou um inscrito! Kkkk
Muito obrigado! 😁
Top DEMAIS. Só por um curso completo de CSS!!! Tua didática é top. Obrigado.
Opa, vlw, Maikon!
De repente, já tem coisa chegando por aí... ;)
@@dpwoficial registrei meu email lá no teu site. Sou Dev Fullstack, mas me falta um pouco de conteúdo sobre CSS, a gente vai aprendendo com as dores do dia a dia, tem cursos bons no mercado, mas ou são muito simples ou verbosos de mais. Tempo é uma coisa que raramente temos para ler a fundo um livro. Exemplos práticos e separados por tópicos pequenos como os seus ajudam bastante. Pois as vezes vc tem que olhar vários minutos de um vídeo e entender todo um contexto para obter a informação que vc quer. Ler a documentação da w3c é tedioso de mais. Livros bons só em inglês os traduzidos são muito velhos. Entender o contexto de como usar todas as ferramentas e organizar um projeto para ser escalável também é algo raro no mercado. Sucesso rapaz e obrigado por compartilhar teu conhecimento
@@MaikonAyresDaSilva Muito obrigado por seu relato, Maikon. Fico feliz que os vídeos estão na medida certa. :)
Bom que você apareceu no canal no tempo certo, pois estamos para disponibilizar um conteúdo inédito de CSS (provavelmente, ainda esta semana) e, também em breve, teremos novidades que têm tudo a ver com o que você disse...
Abs
Sempre com videos muito bons!!
Vlw, Paulo! :D
Otimo conteudo
Obrigado.
Muito bom
Vlwww
Video bom demaisssssssss
Mt bom
Vlw!
TOP!
Vlwww 😁
Começo o video comentando!
Muito obrigado, como sempre, Mateus! ;)
Muito bom! Onde clico para curtir mais de uma vez? Me ajudou de mais, muito obrigado!
Para curtir mais de uma vez tem o easter egg do TH-cam: manda o vídeo para todos os colegas e pede para curtirem. ;)
muito bom
Vlw, Robson! ;)
MEU SENHOR, que tecnica perfeita, valeuuuuu
ia começar a fazer um dark-mode essa semana, que bom que descobri antes de começar XD
Foi transmimento de pensação! =P
@@dpwoficial Big Data
@@yurimuttidev 🤫
@@dpwoficial kkkkkk =P
@@dpwoficial Quando sai seu curso Front End completo ?
Esse é o melhor vídeo de como fazer um dark mode, parabéns 👏🏻👏🏻
Só usaria o jQuery em vez do js puro pra poder escrever menos linhas de código e faria a persistência do dark mode com cookies ou localStorage como já foi falado kkkk
Vídeo perfeito, isso sim é um css moderno e não aquela gambiarra de criar um monte de classes .dark pra mudar casa coisinha como eu fazia kkkk
Com jQuery você pode até escrever menos linhas de código, mas o resultado final vai sair com mais linhas. =P
Vlw pela força, Erivelton. 👊
@@dpwoficial Cara eu falo isso direto pra todo mundo 🙂
Usar JQuery em 2023 deveria ser considerado crime.
Muito Bommmn. Faz mais depois . Com
Cores
Primary
Secondary
Accent
Error
Warning
Tudo com css var
E claro . Mudando qnd aplicado dark mode
Faz daquele jeitinho certo 😎
E saiu vídeo com mais macetinhos de variáveis CSS: th-cam.com/video/PVzWaxzY2BU/w-d-xo.html
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!!
Muito obrigado!
É que no vídeo estamos usando Sass, então, é possível usar o "&" para facilitar a escrita.
Dá uma olhada no nosso vídeo para entender melhor: th-cam.com/video/kA-PXyfjL84/w-d-xo.html
Abs
Ótimo vídeo! Uma dica é você diminuir as frequências entre 7k no equalizador de áudio no seu editor de vídeo, pra diminuir a atenuação do "S"
Tem link de algum tutorial para fazer isso? Uso Premiere para editar.
Vc tem que procurar pro plugins ou na parte de áudio, eu usava o Vegas e o Filmora, e no OBS pra gravar vc pode equalizar e adicionar plugins VST, mas tenta primeiro fuçar dentro do Premier
@@alisondiegodev vlwww
Ó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!
Seria com localStorage?
@@matheusvieira8317 isso!
Tem várias maneiras; essa que o Matheus falou é muito boa, falando genericamente, mas, no fim, sempre vai depender do caso concreto em que um projeto real se encontra.
@@dpwoficial Entendi
Show! Vai fazer vídeo sobre o media prefer?
Podemos fazer, sim. Ainda temos bastante coisa para tratar antes, mas está anotado.
Olá, qua o símbolo que vc usou antes do :hover ? parece muito com o & comercial, porém usando ele meu css fica apontando erro
É o & comercial sim, mas não funciona com CSS puro (ainda); foi usado o pré-processador Sass.
🥰obg
Nadz. :)
Nossa, eu já tô entrando no JS avançado e nunca parei pra pensar em adicionar um tema dark nos meus projetos de exercícios, achando que precisava fazer várias coisas e era somente adicionar uma classe com os estilos, podendo usar por exemplo o toggle da propriedade classList kkkk
Vivendo e aprendendo... :)
#Salvou 😝
😁
Muito Bon
Obrigado, Caio!
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!!!
haha é que é bem curtinho o código. Tenta fazer de cabeça para ir treinando. 😈
@@dpwoficial sim sim, ja fiz ak funfou 1000% é so pra ganhar tempo mesmo pq o prazo é sempre o inimigo nosso kkkk
vlw man, me deparei com uma treta soh vê se vc ja passou por isso
da forma q vc fez ai funciona 1000% porem eu queria deixar a nativa funcionando junto pela @media screen and (prefers-color-scheme: dark) {/* Dark mode styles */}
dai q vem a dor de cabeça pq qd eu clico pra ir pro dark ele coloca a class e troca as cores porem se eu ja estou no dark mode no pc o botao de dark vem desabilitado e marcado como "dia" se eu marco como noite nada acontece se eu desmarco tbm nada acontece pq a do sistema toma prioridade, contornei essa duplicando e invertendo, mas mesmo assim da outro bug agora q é qd eu desligo o dark do sistema, nem sei explicar direito kkkkkk
vlwwwwww
@@dpwoficial osb: +1 inscrito
Pois é, bicho, não consegui entender a questão... rsrs... Explica de outra maneira e/ou coloca o código em algum lugar que a gente dá uma olhada.
tr bom
?
gosto muito do seu canal, se fosse possível eu ficaria feliz em me especializar somente em css kkkk
É possível. :)
Meu Deus, show rsrs
Obrigado, Debora! :D
Parabéns! Muito legal e didático. O que não ficou claro é para que seria a mediaquerie?
Obrigado, Fernando!
A media query de prefers-color-scheme é para informar se a pessoa habilitou o "dark mode" no dispositivo, adequando o dark mode do site conforme essa preferência.
Fantástico, como eu consigo manter o tema ativado quando eu carrego outra página? consegui aplicar na minha landing-page mas ao ser direcionado para a outra página perco a classe .dark-mode no html. Obrigado e até
Muito obrigado, Alexandre!
Para manter o status do tema ativado entre páginas, uma das maneiras é usar cookies. Dá uma olhada nesse outro vídeo: th-cam.com/video/Da74-us9_4w/w-d-xo.html
Vlwww
Gostei do conteúdo!! Eu consigo mudar o layout da pagina exemplo:
Floricultura horto dedo verde e quando ativo o dark mode ele troca pra espaço arte flores? É possível com o dark mode ou tem maneira mais fácil? Se sim por favor me diga haha
Sim é possível, mas não é recomendado fazer isso com CSS somente.
Via JavaScript, por exemplo, você poderia alterar este texto conforme qual modo de visualização está ativo.
ola, otimo video! Uma duvida: que simbolo é esse em 3:04min, antes do " :hover{color....}"
Obrigado pela força, Jefferson.
Esse é o símbolo relacionado a aninhamento de CSS. Dá uma olhada nesse vídeo: th-cam.com/video/YQ5X8YA9maE/w-d-xo.html
Att
Como já havia dito, conteúdo perfeito! Tem alguma forma de fazer o dark mode com variáveis SASS?
Vlw, Hamon!
A primeira coisa para se ter em mente é que variáveis Sass funcionam de uma maneira bem diferente que variáveis CSS.
Mas teria sim como fazer um esquema de dark mode usando Sass. Não seria exatamente da maneira como foi mostrado, mas totalmente possível.
Depois dá uma olhadinha aqui: medium.com/@katiemctigue/how-to-create-a-dark-mode-in-sass-609f131a3995
@@dpwoficial muito obrigado!!
Imagina, eu que agradeço pela participação. :)
para fazer esse :hover dentro da chaves, como funciona ? tentei no meu css e nao permite.
É a sintaxe do pré-processador Sass. Ele permite essa facilidade. :)
Ótimo conteúdo ! Parabéns pela didática. Aproveitando o comentário gostaria de fazer uma pergunta sobre a nomenclatura das variaveis que você utilizou no Java Script. Notei que vc usou o símbolo cifrão ($) nas variaveis que armazenariam elementos do DOM e queria saber se isso é alguem tipo de padrão de código ou se é apenas um padrão que você utiliza.
Mais uma vez obrigado pelo ótimo conteúdo !!!
Alguns devs usamos essa convenção para diferenciar no códigos justamente os elementos DOM de variáveis/constantes que são usadas para outros fins.
Não é algo tão generalizado, mas está aí. Geralmente, pessoal que trabalhou muito com jQuery gosta mais. =P
Obrigado por comentar, Matheus!
@@dpwoficial Bacana, entendi. Obrigado pela resposta !!
@@MatheusVMacc Tamos aê. 👍
Perfeito!! De que maneira eu poderia fazer a página continuar em Dark-mode ao atualizar a página, ou então sempre que eu retornar a ela?
Salva que tá em dark mode em cookie, local storage ou algo assim.
@@dpwoficial você tem algum vídeo ensinando isso?
@@matheusdominguez5156 Ainda não, mas é bem simples: developer.mozilla.org/pt-BR/docs/Web/API/Window/localStorage
vc está inserindo um & na hr do css? pq se for isso no meu não vai
Perceba que o BFB dá suporte a Sass, que é um pré-processador de CSS. Com ele, é possível fazer mais coisas, inclusive, usar essa sintaxe.
Ótimo vídeo parabéns ✌ já usei mais somente em landing page e se eu quiser dark-mode dark-yellow dark-pink dark-blue eu declaro no meu css com variáveis e no js faço um ddocument.querySelectorAll e depois uma funçao com forEach.
Muito obrigado, Romulo.
É, trabalhando direitinho com as variáveis CSS, dentro dessa técnica dá para mudar absolutamente qualquer valor de propriedade para se adequar aos requisitos do projeto.
Obrigado pelo comentário.
@@dpwoficial Muito obrigado 👍.
Que isso, você é de casa. :D
Se eu não quiser um botão, como faria para ele entrar automaticamente a partir de um horário "x"?
developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Date/getHours
show, como seria isso em react?
A lógica é a mesma, mas, como em React, não tem muito essa de ficar mexendo em DOM, uma das maneiras de fazer é criar um componente que seria o toggle para alternar/salvar os "temas".
esse &:hover dá erro no meu VSCODE, porque?
Provavelmente, porque você não habilitou o suporte para Sass no seu projeto.
me explica uma dúvida?
então, qual tecla vc apertou para abrir as informações para adicionar o padding?
Como assim "informações para adicionar o padding"? Em qual minuto do vídeo acontece?
@@dpwoficial 1:58
poderia me explicar como vc fez isso??
eu sou novato nisso, acabei de entrar no curso agr e pela a plataforma que estou fazendo não consigo entender, entrei em tutoriais e vi teu vídeo
possivelmente resolva oq eu quero, só preciso deste passo
@@vinibabidi Pelo que entendi, você perguntou sobre o autocomplete (a lista de opções que aparece ao começar a digitar). Se for isso, mesmo, não precisa fazer nada; o próprio editor (eu uso o VS Code) já faz a lista aparecer quando se começa a digitar.
Cara, muito top, parabéns, com certeza irei utilizar essa técnica nos meus projetos, obrigado.
Mas, tenho uma dúvida.
Sou um pouco novo no mundo da programação, reparei ali que no hover, você utiliza um símbolo:hover, eu normalmente faço de outra forma, .nomeDaClasse: hover { }
O que é aquele símbolo? Gostei da maneira de aplicação
Muito obrigado, Patrick!
Esse símbolo (&) é porque não estou usando CSS puro, mas um pré-processado de CSS chamado Sass.
Ele permite usar várias funcionalidades a mais que no CSS puro. Uma delas é aninhar regras e usar esse símbolo para compor novas regras.
Dá uma olhadinha aqui que você vai entender melhor: th-cam.com/video/kA-PXyfjL84/w-d-xo.html
Show, mt obrigado vou olhar, valeu demais
@@patrickleandro5021 Tranquilo. Depois fala o que achou. 👍
excelente! menos é mais!
E mais eficiente. :)
@@dpwoficial SIm.
Cara, como conheci seu canal agora? tem alguma coisa errada com os scripts do youtube.
Ajuda a burlar o bug compartilhando os vídeos que gostar com os colegas devs. ;)
Excelente vídeo! Sempre me perguntei como poderia ser a lógica que alguns sites usavam a implementar o botão que habilita/desabilita o dark mode do site. Vocês vão gravar algum ensinando a utilizar essa nova propriedade do media query "prefers-color-scheme"?
Podemos sim, Felipe. Boa ideia.
Também publicamos um vídeo falando sobre outras media queries e novas possibilidades de web design responsivo: th-cam.com/video/krtkPiGGfQk/w-d-xo.html
@@dpwoficial Sim, eu assisti e gostei tanto do vídeo, quanto do artigo. Parabéns!
Alguem pode me ajudar? meu botão não funciona de jeito nenhum
html
Dark Mode
java
const $ checkbox =document.queryselector('#switch')
const $ html =document.queryselector('html')
$checkbox.addEventlistener('change',function(){
$html.classList.toggle('dark-mode')
})
Nas suas definições de constantes, você tá colocando o símbolo de dinheiro afastado do restante do texto ("$ html").
@@dpwoficial antes estava junto mas n estava funcionando a mesma maneira
@@surubiabo5644 Se seguiu o vídeo certinho, era para estar funcionando, tanto que funcionou no do vídeo.
Mas coloca num codepen e passa o link que a gente dá uma olhada.
Como eu faço pro dark-mode se manter caso der refresh na página? cookies?
Sim, Sr. Inclusive, dá uma olhadinha: th-cam.com/video/Da74-us9_4w/w-d-xo.html
@@dpwoficial vlw vlw
Faz um vídeo ensinando como evitar que o navegador que esteja no modo dark mude as cores do seu site
pupungbp.com/how-to-prevent-the-website-color-change-from-dark-mode/
O que é aquele simbolo que ele usa? parecido com o &?
É uma funcionalidade de Sass chamada Parent Selector.
sass-lang.com/documentation/style-rules/parent-selector
@@dpwoficial obrigado, vou aprender mais! 🙏
Como passar entre páginas com o mesmo modo escolhido?
Você tem que, de alguma forma, guardar a opção escolhida.
Uma das opções é usando cookies. Dá uma olhadinha nesse vídeo para ver se ajuda: th-cam.com/video/Da74-us9_4w/w-d-xo.html
@@dpwoficial haha precisava de uma opção pra guardar dados de navegação sem ser em banco de dados, esse vídeo veio na hora certa