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

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.

[@dpwoficial]

vlwww 🙏

[@firminor.massango9039]

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

[@dpwoficial]

#inveja

[@017chestera]

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!

[@dpwoficial]

Boa, Lee. E o vídeo está aí, à disposição, caso queira reassistir mais vezes. 👊

[@vivians1495]

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

[@dpwoficial]

Disponha!

[@_alexollie]

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

[@dpwoficial]

Opa! Será?! Hehehe Muito obrigado e grande abraço!

[@andersonalmeida3121]

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

[@dpwoficial]

Opa, eu que agradeço pelo comentário, Anderson! Abraços.

[@bpavanellic]

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

[@dpwoficial]

Aqui tem um artigo em nosso blog para te ajudar: desenvolvimentoparaweb.com/css/variaveis-css-guia-pratico/

[@Gabi-bg9kg]

INACREDITÁVEL de tão maravilhoso

[@dpwoficial]

Haha obrigado, Gabi! Muito obrigado mesmo! o/

[@Gabi-bg9kg]

@@dpwoficial eu que agradeço! me ajudou muito num projeto

[@dpwoficial]

@@Gabi-bg9kg o/

[@TheIguana3d]

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

[@dpwoficial]

Eu que agradeço o feedback. o/

[@douglasfraporti2168]

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

[@dpwoficial]

Muito obrigado, Douglas! Espero que o canal ajude nas brincadeiras. =P

[@thfields]

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

[@dpwoficial]

👊

[@thfields]

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!

[@dpwoficial]

@@thfields Eu que agradeço pela confiança! 👊

[@pablodeveloper]

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

[@dpwoficial]

vlwww

[@oromolloy]

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]

haha é que é bem curtinho o código. Tenta fazer de cabeça para ir treinando. 😈

[@oromolloy]

@@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

[@oromolloy]

@@dpwoficial osb: +1 inscrito

[@dpwoficial]

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.

[@josezayamateusmateus1925]

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

[@dpwoficial]

Muito obrigado, Jose. De verdade. :)

[@salvimateus]

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

[@dpwoficial]

Foi transmimento de pensação! =P

[@yurionthecode]

@@dpwoficial Big Data

[@dpwoficial]

@@yurionthecode 🤫

[@yurionthecode]

@@dpwoficial kkkkkk =P

[@yurionthecode]

@@dpwoficial Quando sai seu curso Front End completo ?

[@salvimateus]

Começo o video comentando!

[@dpwoficial]

Muito obrigado, como sempre, Mateus! ;)

[@sarahpires2251]

Perfeito! Mais uma inscrita. Muito obrigada!

[@dpwoficial]

Eu que agradeço, Sarah.

[@christianluis3356]

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

[@dpwoficial]

Obrigado, Christian! o/

[@renatooliveira9184]

Cara que simples, muito obrigado!!!!

[@dpwoficial]

Muito facinho, né? Haha Eu que agradeço pela participação.

[@robert5509]

Ótimo conteúdo!! me ajudou demais!!

[@dpwoficial]

Maravilha, Robert. Volte sempre. :)

[@romulomenesess]

Muito obrigado!

[@dpwoficial]

De nada.

[@marciocarvalho2369]

Vlw irmão, suas dicas me ajudaram muito. + Um inscrito

[@dpwoficial]

Eu que agradeço a confiança, Marcio.

[@kaueneves1906]

Mas explicou muito bem, vlw irmão vai me ajudar muito no meu projeto em Django

[@dpwoficial]

🤙

[@Debby_xD]

Simplesmente sensacional ! Gratidão pelo conteúdo

[@dpwoficial]

Tamos aê. :)

[@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!

[@matheusvieira8317]

Seria com localStorage?

[@well_mtb]

@@matheusvieira8317 isso!

[@dpwoficial]

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.

[@well_mtb]

@@dpwoficial Entendi

[@fredsetra5669]

Excelente aula parabéns !!!!!1

[@dpwoficial]

Vlw, Fred! 😃

[@erickcampos26]

Muito bom! Onde clico para curtir mais de uma vez? Me ajudou de mais, muito obrigado!

[@dpwoficial]

Para curtir mais de uma vez tem o easter egg do KZbin: manda o vídeo para todos os colegas e pede para curtirem. ;)

[@MarceloMartinsDev]

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

[@dpwoficial]

É o & comercial sim, mas não funciona com CSS puro (ainda); foi usado o pré-processador Sass.

[@fvgoya]

Realmente mando muito bem nesse vídeo.

[@dpwoficial]

Vlw, Fernando! :D

[@nelsonsoares2281]

Excelente, parabéns!

[@dpwoficial]

Obrigado 😃

[@ruihall]

seus videos são muitos bons

[@dpwoficial]

Vlw, mesmo!

[@matheusdominguez5156]

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?

[@dpwoficial]

Salva que tá em dark mode em cookie, local storage ou algo assim.

[@matheusdominguez5156]

@@dpwoficial você tem algum vídeo ensinando isso?

[@dpwoficial]

@@matheusdominguez5156 Ainda não, mas é bem simples: developer.mozilla.org/pt-BR/docs/Web/API/Window/localStorage

[@alisondiegodev]

Ó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"

[@dpwoficial]

Tem link de algum tutorial para fazer isso? Uso Premiere para editar.

[@alisondiegodev]

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

[@dpwoficial]

@@alisondiegodev vlwww

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

[@dpwoficial]

Vlw, Douglas!

[@lucasnovaki2327]

vou implementar 👍🏻 valeu mano

[@dpwoficial]

vlwww

[@jeffersonaraujo4099]

ola, otimo video! Uma duvida: que simbolo é esse em 3:04min, antes do " :hover{color....}"

[@dpwoficial]

Obrigado pela força, Jefferson. Esse é o símbolo relacionado a aninhamento de CSS. Dá uma olhada nesse vídeo: kzbin.info/www/bejne/j4KYiWuPdp6gl6c Att

[@dvdrocha]

Obrigado monstro sagrado, aprendi fazer dark-mode e aprendi a usar a palavra manutenir em situações.

[@dpwoficial]

Aqui trabalhamos com a norma culta da língua portuguesa. 👍

[@hainshj]

Nossa muito bom os vídeos do seu canal.

[@dpwoficial]

Muito obrigado, Hains! :D

[@muh134]

Sensacional! Explicação clara e objetiva. Pena que só da pra dar um like!

[@dpwoficial]

Dá para enviar para os devs que você conhece para darem like, também. x)

[@bossledesenvolvimentoweb6045]

Excelente vídeo! Como de costume nota 10!

[@dpwoficial]

Aí sim! 😃

[@diegoi7]

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

[@dpwoficial]

Vivendo e aprendendo... :)

[@ericcoutinho3985]

Show de bola! Parabéns

[@dpwoficial]

Obrigado, Eric. Vlwww

[@kaualandi7073]

Método incrível!!!

[@dpwoficial]

Vlw, Kauã! 👊

[@PedroHenrique-vw5iy]

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!!

[@dpwoficial]

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: kzbin.info/www/bejne/oXKQgYuvm89_bpY Abs

[@Sigameosbons]

Muito top o conteúdo. Já me ajudou várias vezes nos meus projetos.

[@dpwoficial]

Fico feliz em saber, Alexandre. Aplicar na prática que é bom! ;)

[@otavioleomar4291]

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

[@dpwoficial]

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.

[@alexfreitas4428]

Botei fé hahaha

[@dpwoficial]

Nóis. B-)

[@ViolinistCompilation]

Caramba explica bem em parabéns...

[@dpwoficial]

Opa, brigadão. :D

[@fernandoluisoliveira8375]

Parabéns! Muito legal e didático. O que não ficou claro é para que seria a mediaquerie?

[@dpwoficial]

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.

[@alexalannunes]

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]

E saiu vídeo com mais macetinhos de variáveis CSS: kzbin.info/www/bejne/hofdiJSur75leLc

[@matheusfarias3277]

Esse canal é top. Estou aprendendo muito.

[@dpwoficial]

Vlw, Matheus! Ativa o sininho para receber todos os vídeos primeiro. 😉

[@XA-12-pk6ml]

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?

[@dpwoficial]

Esse símbolo & é o chamado "seletor de aninhamento". Dá uma olhada nesse outro vídeo: kzbin.info/www/bejne/j4KYiWuPdp6gl6c

[@kaueneves1906]

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

[@dpwoficial]

🤙

[@szlima]

Muito bom, obrigada!

[@dpwoficial]

De nada. :)

[@MaikonAyresDaSilva]

Top DEMAIS. Só por um curso completo de CSS!!! Tua didática é top. Obrigado.

[@dpwoficial]

Opa, vlw, Maikon! De repente, já tem coisa chegando por aí... ;)

[@MaikonAyresDaSilva]

@@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

[@dpwoficial]

@@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

[@rafael7425]

show, como seria isso em react?

[@dpwoficial]

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".

[@contaassinante5984]

Show! Vai fazer vídeo sobre o media prefer?

[@dpwoficial]

Podemos fazer, sim. Ainda temos bastante coisa para tratar antes, mas está anotado.

[@suelytonsouza8629]

até me inscrevi aqui, bom demais

[@dpwoficial]

vlwww

[@sr_romer]

muito bom, parabéns e obrigado

[@dpwoficial]

Eu que agradeço pela participação, Romeci! :)

[@hamon5557]

Como já havia dito, conteúdo perfeito! Tem alguma forma de fazer o dark mode com variáveis SASS?

[@dpwoficial]

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

[@hamon5557]

@@dpwoficial muito obrigado!!

[@dpwoficial]

Imagina, eu que agradeço pela participação. :)

[@jairosousa8148]

Espetacular!

[@dpwoficial]

Muitíssimo obrigado, Jairo! :D

[@everton097]

para fazer esse :hover dentro da chaves, como funciona ? tentei no meu css e nao permite.

[@dpwoficial]

É a sintaxe do pré-processador Sass. Ele permite essa facilidade. :)

[@vinibabidi]

me explica uma dúvida? então, qual tecla vc apertou para abrir as informações para adicionar o padding?

[@dpwoficial]

Como assim "informações para adicionar o padding"? Em qual minuto do vídeo acontece?

[@vinibabidi]

@@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

[@dpwoficial]

@@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.

[@BindwaysPartner]

muito bom, adorei

[@dpwoficial]

Opa, que bom que gostou. :)

[@steniomoreira7935]

top demais!!

[@dpwoficial]

vlwww

[@mariocunha3555]

Mto bom! Ganhou um inscrito! Kkkk

[@dpwoficial]

Muito obrigado! 😁

[@MatheusAlmeidaC]

valeu, explicou bem demais :D

[@dpwoficial]

vlw, brow!

[@denn501]

Genial!!

[@dpwoficial]

B-)

[@dsfgato]

muito bom, mano!

[@dpwoficial]

Muito obrigado, mano!

[@danielvinicius4906]

Muito top

[@dpwoficial]

Vlw, Daniel! o/

[@caioemanoel3825]

Como passar entre páginas com o mesmo modo escolhido?

[@dpwoficial]

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: kzbin.info/www/bejne/epKaZWCrqJ6Satk

[@caioemanoel3825]

@@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

[@hugoalmeida883]

O que é aquele simbolo que ele usa? parecido com o &?

[@dpwoficial]

É uma funcionalidade de Sass chamada Parent Selector. sass-lang.com/documentation/style-rules/parent-selector

[@hugoalmeida883]

@@dpwoficial obrigado, vou aprender mais! 🙏

[@yuminatembe]

Amei

[@dpwoficial]

[@carlinhosguimaraes1165]

brabo d+

[@dpwoficial]

vlw

[@tiagobertoldo3993]

Muitoooo bom !!!!

[@dpwoficial]

Vlwww, Thiago! :D

[@eriveltondasilva6878]

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

[@dpwoficial]

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. 👊

[@mmjunior]

@@dpwoficial Cara eu falo isso direto pra todo mundo 🙂

[@GabrielSilva-ni4jy]

Usar JQuery em 2023 deveria ser considerado crime.

[@tseamrog]

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é

[@dpwoficial]

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: kzbin.info/www/bejne/epKaZWCrqJ6Satk Vlwww

[@Arthur-bq5uk]

Como eu faço pro dark-mode se manter caso der refresh na página? cookies?

[@dpwoficial]

Sim, Sr. Inclusive, dá uma olhadinha: kzbin.info/www/bejne/epKaZWCrqJ6Satk

[@Arthur-bq5uk]

@@dpwoficial vlw vlw

[@MatheusVMacc]

Ó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 !!!

[@dpwoficial]

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!

[@MatheusVMacc]

@@dpwoficial Bacana, entendi. Obrigado pela resposta !!

[@dpwoficial]

@@MatheusVMacc Tamos aê. 👍

[@silviopln1]

Otimo conteudo

[@dpwoficial]

Obrigado.

[@davidwillian680]

Cara, como conheci seu canal agora? tem alguma coisa errada com os scripts do youtube.

[@dpwoficial]

Ajuda a burlar o bug compartilhando os vídeos que gostar com os colegas devs. ;)

[@andjeckson]

Mt bom

[@dpwoficial]

Vlw!

[@R0bertt3]

Se eu não quiser um botão, como faria para ele entrar automaticamente a partir de um horário "x"?

[@dpwoficial]

developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Date/getHours

[@joaofury7950]

vc está inserindo um & na hr do css? pq se for isso no meu não vai

[@dpwoficial]

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.

[@thiagomendes7787]

Muito bom

[@dpwoficial]

Vlw, Thiago!

[@G4lahad]

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]

Pode detalhar mais o problema ou colocar num pen.new pra gente ver?

[@G4lahad]

@@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

[@dpwoficial]

@@G4lahad Tem várias maneiras diferentes; uma delas é usar cookies. kzbin.info/www/bejne/epKaZWCrqJ6Satk

[@lino1678]

@@G4lahad como conseguiu resolver ?

[@alencarasous]

@@lino1678 Tmb tô querendo saber

[@thiago7406]

Video bom demaisssssssss

[@dpwoficial]

[@parentejohnny9]

esse &:hover dá erro no meu VSCODE, porque?

[@dpwoficial]

Provavelmente, porque você não habilitou o suporte para Sass no seu projeto.

[@surubiabo5644]

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') })

[@dpwoficial]

Nas suas definições de constantes, você tá colocando o símbolo de dinheiro afastado do restante do texto ("$ html").

[@surubiabo5644]

@@dpwoficial antes estava junto mas n estava funcionando a mesma maneira

[@dpwoficial]

@@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.

[@elizduarte6547]

TOP!

[@dpwoficial]

Vlwww 😁

[@lordrobson1250]

muito bom

[@dpwoficial]

Vlw, Robson! ;)

[@patrickleandro5021]

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

[@dpwoficial]

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: kzbin.info/www/bejne/oXKQgYuvm89_bpY

[@patrickleandro5021]

Show, mt obrigado vou olhar, valeu demais

[@dpwoficial]

@@patrickleandro5021 Tranquilo. Depois fala o que achou. 👍

[@AllanMegiani]

Sensacional!

[@dpwoficial]

Vlw, Allan!

[@Paulo-cf4mh]

Sempre com videos muito bons!!

[@dpwoficial]

Vlw, Paulo! :D

[@eismeaqui25]

Meu Deus, show rsrs

[@dpwoficial]

Obrigado, Debora! :D

[@JonathanDev88]

Faz um vídeo ensinando como evitar que o navegador que esteja no modo dark mude as cores do seu site

[@dpwoficial]

pupungbp.com/how-to-prevent-the-website-color-change-from-dark-mode/

[@raphaelfernandes6202]

O "&" se refere ao elemento, em alguns casos temos: &.class / .class &, qual a lógica?

[@dpwoficial]

A lógica é onde você quer se referir ao elemento. O seletor `.element.class` é bem diferente de `.class .element`.

[@cavallucas6629]

@@dpwoficial como se faz esse &? Qual tecla?

[@dpwoficial]

@@cavallucas6629 Shift+7

[@diegoi7]

@@dpwoficial Esse "&" que seria a referência do seletor e só funciona por que você está usando Sass?

[@dpwoficial]

@@diegoi7 Exatamente.

[@Vargass-01]

#Salvou 😝

[@dpwoficial]

😁

[@TBMonstro]

Não entendi. Declarou-se uma classe, vai no f12 e clica no dark mode? Deve ter algo a mais ai. Não consegui.

[@dpwoficial]

A qual parte do vídeo está se referindo? Qual minutagem?

[@TBMonstro]

@@dpwoficial Assisti uma outra aula, e foi utilizado apenas CSS3. kzbin.info/www/bejne/bIjYaH2VZ7xnmtk 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.

[@TBMonstro]

@@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. kzbin.info/www/bejne/q6vPgYeJecSMgbc Abraços.

[@dpwoficial]

@@TBMonstro OK vlwww

[@alencarasous]

Eu recarrego a página é o dark mode volta para branco. Queria permanecer no modo escuro, alguém me ajudar?

[@dpwoficial]

Se você não fizer nada para manter o estado entre páginas/recarregamentos, é esperado que isso aconteça. Uma possibilidade é guardar a opção escolhida num cookie. Aqui tem um vídeo que pode ajudar: kzbin.info/www/bejne/epKaZWCrqJ6Satk

[@alencarasous]

@@dpwoficial Vlw, vou dá uma olhadinha