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.
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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-kA-PXyfjL84.html Abs
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!
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.
Ó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.
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
@@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
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
Obrigado pela força, Jefferson. Esse é o símbolo relacionado a aninhamento de CSS. Dá uma olhada nesse vídeo: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-YQ5X8YA9maE.html Att
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
Ó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!
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 😎
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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-kA-PXyfjL84.html
@@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.
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
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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Da74-us9_4w.html Vlwww
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
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".
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.
@@dpwoficial Assisti uma outra aula, e foi utilizado apenas CSS3. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-6Wu7J_2W4dw.html Agora entendi que o Sr. utilizou Java Script. Acho que foi essa parte que , e confundi. De qualquer forma agradeço pela resposta. Tudo de bom.
@@dpwoficial Na verdade eu estava estudando Responsividade e @MediaQuery, quando soube que dá para fazer o MODO DARK apenas com CSS, com a propriedade: prefers-color-scheme: dark. Que é mais simples ainda em relação ao vídeo que postei para o senhor no link acima. E achei. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-uzlPTSD_YKU.html Abraços.
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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Da74-us9_4w.html
Estou conseguindo fazer o darkmode até certa parte, mas quando implemento a label e o js não funciona, o que pode ser? Eu estou colocando a label dentro do meu nav, já tirei e tbm não deu certo
@@dpwoficial Opa consegui resolver:) Só outra pergunta, como faço para gravar a escolha? Por exemplo: Escolhi o modo noturno, quando eu atualizar o site quero que ainda esteja no modo noturno
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: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-krtkPiGGfQk.html
Ó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.
