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.
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!!!
@@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
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
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!
Ó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!
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.
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: ua-cam.com/video/kA-PXyfjL84/v-deo.html Abs
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 😎
@@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
Simples o Caraí, não sei nada de UX UI, só sei back-end. Mas explicou muito bem, vlw irmão vai me ajudar muito no meu projeto em Django com python no back-end
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
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.
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
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.
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
Ó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!
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: ua-cam.com/video/kA-PXyfjL84/v-deo.html
Obrigado pela força, Jefferson. Esse é o símbolo relacionado a aninhamento de CSS. Dá uma olhada nesse vídeo: ua-cam.com/video/YQ5X8YA9maE/v-deo.html Att
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') })
@@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.
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".
Ó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 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.
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: ua-cam.com/video/Da74-us9_4w/v-deo.html Vlwww
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: ua-cam.com/video/krtkPiGGfQk/v-deo.html
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: ua-cam.com/video/Da74-us9_4w/v-deo.html
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 🙏
Quem teve a coragem de dar deslike? O vídeo é muito bom!
#inveja
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. 👊
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.
rápido, prático, simples e sem enrolação, vlw d+!
Disponha!
Top! Simples e funcional! É o melhor canal de wev development aqui no YT.
Opa! Será?! Hehehe
Muito obrigado e grande abraço!
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
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/
Simples, fácil e objetivo, muito obrigado por compartilhar esse conhecimento
Eu que agradeço o feedback. o/
É incrível este canal, eu pessoalmente aprendo muito com os tutoriais.
Muito obrigado, Jose. De verdade. :)
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/
Obrigado pelo vídeo, estava procurando sobre como fazer o switch estilizado, mas acabei vendo algo melhor que seria a dica do root, valeu!
vlwww
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.
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
@@yurionthecode 🤫
@@dpwoficial kkkkkk =P
@@dpwoficial Quando sai seu curso Front End completo ?
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. 👍
Começo o video comentando!
Muito obrigado, como sempre, Mateus! ;)
Simplesmente sensacional ! Gratidão pelo conteúdo
Tamos aê. :)
Ó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
Cara que simples, muito obrigado!!!!
Muito facinho, né? Haha
Eu que agradeço pela participação.
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! 👊
Perfeito! Mais uma inscrita. Muito obrigada!
Eu que agradeço, Sarah.
Ó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
Muito bom o codigo, rapido e limpo. Parabéns
Obrigado, Christian! o/
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: ua-cam.com/video/kA-PXyfjL84/v-deo.html
Abs
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: ua-cam.com/video/PVzWaxzY2BU/v-deo.html
Realmente mando muito bem nesse vídeo.
Vlw, Fernando! :D
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 UA-cam: manda o vídeo para todos os colegas e pede para curtirem. ;)
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
Simples o Caraí, não sei nada de UX UI, só sei back-end. Mas explicou muito bem, vlw irmão vai me ajudar muito no meu projeto em Django com python no back-end
🤙
Ótimo conteúdo!! me ajudou demais!!
Maravilha, Robert. Volte sempre. :)
Excelente vídeo! Como de costume nota 10!
Aí sim! 😃
Muito obrigado!
De nada.
Excelente aula parabéns !!!!!1
Vlw, Fred! 😃
Que aula incrível. Meus parabéns pela didática +1 inscrito
Vlw, Douglas!
Excelente, parabéns!
Obrigado 😃
Método incrível!!!
Vlw, Kauã! 👊
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)
Vlw irmão, suas dicas me ajudaram muito. + Um inscrito
Eu que agradeço a confiança, Marcio.
Esse canal é top. Estou aprendendo muito.
Vlw, Matheus!
Ativa o sininho para receber todos os vídeos primeiro. 😉
Mas explicou muito bem, vlw irmão vai me ajudar muito no meu projeto em Django
🤙
Nossa muito bom os vídeos do seu canal.
Muito obrigado, Hains! :D
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... :)
vou implementar 👍🏻 valeu mano
vlwww
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! ;)
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.
Show de bola! Parabéns
Obrigado, Eric. Vlwww
Espetacular!
Muitíssimo obrigado, Jairo! :D
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
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. :)
seus videos são muitos bons
Vlw, mesmo!
Botei fé hahaha
Nóis. B-)
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.
Show! Vai fazer vídeo sobre o media prefer?
Podemos fazer, sim. Ainda temos bastante coisa para tratar antes, mas está anotado.
Caramba explica bem em parabéns...
Opa, brigadão. :D
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 bom, obrigada!
De nada. :)
muito bom, parabéns e obrigado
Eu que agradeço pela participação, Romeci! :)
Ó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ê. 👍
muito bom, adorei
Opa, que bom que gostou. :)
até me inscrevi aqui, bom demais
vlwww
valeu, explicou bem demais :D
vlw, brow!
Genial!!
B-)
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: ua-cam.com/video/kA-PXyfjL84/v-deo.html
Show, mt obrigado vou olhar, valeu demais
@@patrickleandro5021 Tranquilo. Depois fala o que achou. 👍
top demais!!
vlwww
Amei
Muito top
Vlw, Daniel! o/
muito bom, mano!
Muito obrigado, mano!
Mt bom
Vlw!
Muitoooo bom !!!!
Vlwww, Thiago! :D
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: ua-cam.com/video/YQ5X8YA9maE/v-deo.html
Att
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.
Muito bom
Vlw, Thiago!
Mto bom! Ganhou um inscrito! Kkkk
Muito obrigado! 😁
Otimo conteudo
Obrigado.
muito bom
Vlw, Robson! ;)
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.
TOP!
Vlwww 😁
Video bom demaisssssssss
brabo d+
vlw
Sensacional!
Vlw, Allan!
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".
Ó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
$checkbox.addEventListener('change',funtion(){
$html.classList.toggle('dark-mode')
})
Boa.
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/
Sempre com videos muito bons!!
Vlw, Paulo! :D
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.
Meu Deus, show rsrs
Obrigado, Debora! :D
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: ua-cam.com/video/Da74-us9_4w/v-deo.html
Vlwww
🥰obg
Nadz. :)
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: ua-cam.com/video/krtkPiGGfQk/v-deo.html
@@dpwoficial Sim, eu assisti e gostei tanto do vídeo, quanto do artigo. Parabéns!
gosto muito do seu canal, se fosse possível eu ficaria feliz em me especializar somente em css kkkk
É possível. :)
Irmão, sou iniciante e estou tentando criar essa função. Qual seria esse símbolo que você usou ao lado do .dark-mode e :hover a partir do minuto 3:07?
Esse símbolo & é o chamado "seletor de aninhamento". Dá uma olhada nesse outro vídeo: ua-cam.com/video/YQ5X8YA9maE/v-deo.html
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. :)
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. ;)
Muito Bon
Obrigado, Caio!
excelente! menos é mais!
E mais eficiente. :)
@@dpwoficial SIm.
#Salvou 😝
😁
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
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: ua-cam.com/video/Da74-us9_4w/v-deo.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
Como eu faço pro dark-mode se manter caso der refresh na página? cookies?
Sim, Sr. Inclusive, dá uma olhadinha: ua-cam.com/video/Da74-us9_4w/v-deo.html
@@dpwoficial vlw vlw