Dark Mode raiz com CSS e JavaScript | Code/Drops #24

[@fabioa.bocampagni7902]

O Maykao tem uma didática excelente.

[@rocketseat]

Valeu o feedback! Maykão é show mesmo 💜

[@viniciusbento1025]

Cara, pra quem está começando um video desse tu tem que ver 10x pra entender, porque o cara fala muito rapido, e não explica 80% dos passos, ai tu tem que processar oque ele fez e ouvir o outro passo que ele ja ta dando. insano...

[@josuelustosa4789]

Parabéns Maykão, lógica sensacional essa aplicada com key para selecionar as variáveis em CSS.

[@deveduoliveira]

Caramba cara, valeu mesmo, estou desenvolvendo um app em equipe e a gente estava no dilema de fazer com ou sem tema dark, isso vai ajudar bastante!!

[@rocketseat]

Que bom, ficamos felizes em poder te ajudar! 💜

[@joelitonsilva5391]

Maykão, você é monstro demais! continua com essas aulas que tá delicinha kkgkgjkkkk

[@rocketseat]

Valeu pelo feedback! hahahha Maykão é top 😅

[@yagolopeslazaro9886]

Maluco vc é brabo mesmo em !!! Top de mais!! Aprendi que existe variável no css, que tem como mudar elas pelo JS, e ainda de quebra aprendi a usar expressão regular no js.

[@maykbrito]

Yagaaaoo.. esse é o espírito da coisa hahha Um mundo de possiblidades né? Tamo junto! vlw 🎉

[@rocketseat]

💜

[@leandrosoares6]

Monstro Maikão! Parabéns pela didática e pela forma simples e direta de passar o conteúdo!

[@maykbrito]

Obg brother

[@rocketseat]

💜

[@luamalvesdeoliveira9676]

Meu amigo, que didática!

[@siqueiradev9603]

Você manda muito bem professor!! Parabéns.

[@RobsonAlvesJJ]

Parabéns Maykao show.... de bola....

[@rocketseat]

Faala Robson! Valeeu pelo feedback! 💜

[@darkcaveron]

Esse mayk é muito gente boa, gosto demais de ver os vídeos que ele faz.

[@maykbrito]

Valeu bro 😍

[@rocketseat]

Valeu pelo feedback, Ítalo! 💜 o Maykão é show mesmo 💜

[@akanano]

Boa, Mayk! Muito interessante e divertido de acompanhar e fazer! 😄

[@maykbrito]

🥳

[@mateusv.farias2503]

Sem frameworks, só JavaScript e css. Perfeito

[@rocketseat]

Valeu o feedback, Mateus! 💜

[@pedroabreu340]

De vdd o conteúdo da rocketseat é muito acima do nível, bom dms, cada vídeo é um aprendizado novo, valeu msm

[@rpatriciaalves]

TOP TOP TOP, aprendi muito em poucos minutos, vlw Maycão, você é fera!!!

[@rocketseat]

Ele é top, né Patricia?? 💜💜

[@wenderteixeira1851]

Mayk e o bixo pegando. cara top d++++

[@rocketseat]

Ele é incrível, não? 💜

[@VortexChannelBr]

Estou pasmo com esse code, não tinha ideia desta capacidade do JavaScript.... vlw Maykão

[@rocketseat]

Valeu pelo feedback, Jhonathan! 💜 estamos felizes de ter te ensinado algo novo!💜

[@raspaes3899]

Sinceramente, quando vc assiste um vídeo do Maykão codando, e ele usa as técnica que vc tbm usa... é a certeza que vc ta no caminho certo! 🤗

[@adrianovictorsantos]

Fala Mayk, achei muito top a dica do video !!!

[@maykbrito]

Fala Adriano! Que bacana.. valeu 🚀

[@rocketseat]

💜

[@duduhfoz]

Mayk é o cara de didática top e fácil.

[@CaioLesnock]

Caraca, esse cara é o monstro do front end! Sensacional!

[@rocketseat]

Maykão é sensacional mesmo! 💜 Valeu pelo feedback, Caio! 💜

[@vitorpereira316]

Maykão é foda demais, valeu pelo vídeo Rocketseat

[@maykbrito]

hahaha Valeu Vitor! TMJ

[@rocketseat]

Ele é top mesmo, né? 💜 Valeu por nos acompanhar! 💜

[@daoroots]

Só para contribuir também. Existe uma variável: "data-theme", que pode ser atribuído a tag html e dentro do css do seletor html tu cria as variáveis de cor e para cada data-theme, fica melhor e mais fácil, com puro css e html. Aprendi isso faz um tempo e nunca mais esqueci. Sendo assim fica da seguinte forma: html[data-theme="light"]. Inclusive aprendi no vídeo sobre dark theme do mesmo canal que foi retirado parte desse conteúdo: kzbin.info/www/bejne/kHy7p5KQfbZpa5Y. Mais o modo raiz é massa. Com certeza vai ser usual em outros casos.

[@rocketseat]

Boaa Jônatas!! 💜

[@eddi3ms]

Top demais !!! Bem que um amigo me falou "segue a rocketseat, que eles são #oda"

[@matheusdecampos430]

o cara é fera meu!

[@rocketseat]

Maykão é top, né?💜

[@tiagoborges7297]

Explicação muito clara e concisa. Essa foi top irmão! Como diz o Chris do todo mundo odeia o Chris: "Ei, você conhece o Maykão" hahah

[@rocketseat]

Hahahah Valeeu, Tiago! 💜💜

[@jessandro]

Que interessante! Vou agora refatorar meu darkmode.

[@apholo8308]

Continue com essas aulas de Javascript puro Mikao, são de grande valor pois nem sempre precisamos de coisas ultra complexas, trabalho show

[@rocketseat]

Valeu pela sugestão e feeback, Apholo! 💜

[@willsandres]

tnc man q aula foda virei fã ja.

[@rocketseat]

Ficamos felizes com o feedback, Okdok! 💜

[@josiclerlemesilva317]

Conteúdo sensacional parabéns Mayk!!!

[@maykbrito]

Valeu Josicler!!♥️

[@rocketseat]

💜

Muito bom cara, continue assim!

[@rocketseat]

Valeu pelo feedback! 💜

[@marlonpaulodasilva6415]

Maikao é fera na explicação em

[@maykbrito]

Valeu manin!! 💜

[@rocketseat]

💜

[@SalmoMascarenhas]

Maykão, coisa boa essas suas aulas!!

[@maykbrito]

😍💜🚀

[@rocketseat]

💜

[@luislucass]

Awesome! Thank you Mayk!

[@rocketseat]

Thank YOU, Luis! 💜

[@gabrielteles3079]

Mto legal cara, não entendi td mas achei mto interessante, eu tô com dificuldades pra estudar mas esses pequenos projetos me motivam mto

[@rocketseat]

Na nossa comunidade aberta você consegue tirar suas dúvidas 💜 rocketseat.com.br/comunidade Entra aí! 💜

[@RoqueSouzaSSA]

Excelente conteúdo, excelente didática. Parabéns!!!

[@robsontazinaffo4704]

Top hein...vou tentar implementar no código do NLW Origin...

[@calmvibes_zen]

Mandou bem mano, conteúdo top..

[@rocketseat]

Valeu pelo feedback, Albert! 💜

[@espinhara]

Vídeo muito massa. Antes eu pegava o link do DarkMode.js pra fazer ele. Agr vou criar os meus ksksk

[@rocketseat]

Booa, isso aí! 💜 manda bala no código! 💜

[@euheraldoluciano]

Que legal!

[@rocketseat]

Valeu o feedback, Heraldo! 💜

[@rodrigopereira16]

O Maykão tem o poder de fazer uma coisa difícil se tornar fácil ❤

[@jcesar83]

Mayk Brito é brabo 😂

[@rocketseat]

Brabo demais!!! hahahaha 💜

[@TheCEMF]

Se tem RegEx, tem like. Boa Maykão!

[@rocketseat]

Valeu pelo like! 💜

[@nelsonsoares2281]

Muito bom mano.

[@pedropinho2575]

muito show, aprendi bastante 🚀

[@rocketseat]

Valeu pelo feedback, Pedro! ficamos felizes em te ensinar 💜

[@andoresp_]

Mayk Brito está on fire com essas aulas! continua que ta delicinha kkkk

[@maykbrito]

uhuulll 🔥

[@YGMartinS]

Ótimo Code, parabéns!

[@maykbrito]

obrigaduuu

[@gabrielferreira4948]

Você é fera demais, Mayk!!

[@rocketseat]

Ele é top né? 💜

[@JoaoAlexandreBitar]

Muito massa cara

[@rocketseat]

Que bom que gostou! 💜

[@hawkinsdavidmarques]

Sensacional! É uma novo método para fazer essa aplicação. Bom pra treinar. Mas eu particularmente prefiro usar o toggleClass.

[@rocketseat]

Se chega no resultado, então está tudo ótimo! 💜 o importante é aprender! 💜

[@wiltonvieira8201]

Conteúdo Sensacional Parabéns!

[@maykbrito]

Valeu Wilton!💜

[@VictorRadael]

Valeu Mayk, ajudou muuuito, excelente conteúdo!

[@maykbrito]

Valeu Victor!

[@rocketseat]

💜

[@matheus4m]

Monstro cara... Obrigado por esse mini project ... Tooopeeee.... Mais um pra subir no Github como projetinho delicinha... Kkkkkk.... Top

[@rocketseat]

Manda brasa, Matheus! agradecemos o feedback 💜

[@jonataoliveira1403]

Muito bom! Façam um vídeo sobre RegEx, já deu pra ver que o Mayk manja muito

[@rocketseat]

Jonatã, valeu a sugestão e pelo feedback! 💜

[@ameliasaomarcos]

Da pra ver que você se diverte fazendo. Hehe bem legal. Abs

[@maykbrito]

Muito hahah 😋

[@rocketseat]

💜

[@marcoiung]

Muito legal.

[@vitalvesneto]

Sensacional!

[@maykbrito]

👏🏽👏🏽👏🏽👏🏽

[@marcosrene4301]

Mayk, tú é top demais omi...

[@maykbrito]

hahaha.. Valeu Marcão!

[@rocketseat]

💜

[@Felipe_Assis_Souza]

Sensacional Mayk! Obrigado pela aula, me ajudou a compreender melhor como manipular as variáveis do CSS no JavaScript, uma coisa que eu estava quebrando um pouco a cabeça para colocar em meu projeto rsrsrs

[@maykbrito]

Que bom que valeu a pena pra você 💜🚀 tmj

[@rocketseat]

💜

[@JrMarquesHD]

eu tava pensando nisso agoraaaaaaaaaaaaa

[@ralfdewrich]

eu também mano KKKKKKKKK

[@maykbrito]

🤩

[@nelsonmfinda]

Opah! Dhr 👏 valeu.

[@rocketseat]

Maykão é show, né? 💜

[@tamaninicristiano]

oooo Mayk. Show de Bola. Poderia fazer um video de uso do react-native-qrcode-scanner Esta biblioteca está dando dor de cabeça.

[@rocketseat]

Valeu pela sugestão, Cristiano! 💜

[@kdevgame]

Show de bola!!!!

[@rocketseat]

Valeu, Eliakim!

[@vincolasrj]

Muito bom!! Só achei que o map foi desnecessário.. poderia ser um forEach normal mesmo.. uma vez que você não precisa de um novo array... Mas foi show de bola!!

[@maykbrito]

vdd né Vini! 🚀

[@rocketseat]

💜

[@mauriciom8539]

kkkkk achei muito bom, parabéns aí

[@rocketseat]

Valeu pelo feedback, Maurício! 💜

[@warden9590]

Foda d+

[@TheIguana3d]

Aula delicinha !!!!

[@maykbrito]

👌🏽

[@EliabyTeixeira]

muito bom

[@rocketseat]

Valeeeeu, Eliaby! 💜 😍

[@sergioaraujo2748]

Tô bem focado no estudo só de css, valeu pela aula. (°• ° )

[@maykbrito]

Que bom que curtiu!

[@FelipeGenuino]

Show hein

[@rocketseat]

Valeu pelo feedback, Felipe 💜

[@fernandojsantos09]

Eu teria feito isso via CSS mesmo... mas muito legal a ideia, me fez pensar bem diferente

[@rocketseat]

Que bom que te fez aprender algo novo, Fernando! 💜

[@fernandojsantos09]

@@rocketseat nem fala, curti demais a ideia da função utilizando regex

[@thacio58]

Só uma pequena dica, usem a flag "g" no final da Regex, após a barra, para caso sua variável Css tenha o nome como mais hifens. Ex.: "--primary-bg-color".

[@eduardoferreira2499]

Top!

[@rocketseat]

Valeu, Duh! 💜

[@DaniloCaetano91]

Muitas voltas pra um problema simples!

[@maykbrito]

hehehe

[@rocketseat]

E essa é a parte mais bonita do desenvolvimento Danilo! Termos inúmeros caminhos para resolver os problemas 😊💜

[@chewbacca01]

Voto por uma semana Oministack sendo apresentada pelo Maykão!

[@rocketseat]

Fica de olho na comunidade, Alex! O Maykão apresenta a MaratonaDev, que é justamente isso! logo mais terá uma outra 💜

[@G4lahad]

Como faz para gravar o estado dar-mode? Para quando recarregar a página, permanecer no modo escolhido?

[@alexrodriguesmoreira820]

Video top!

[@maykbrito]

🚀

[@marcuscavalcante5515]

Poxa, eu tava fazendo algo parecido ontem. Usei o Styled Components, mas eu queria muito usar um jeito mais raíz.

[@rocketseat]

Que bom que pudemos te ajudar! 💜

[@mywork6882]

Bom dia! Parabéns pelo video. Se tiver a 2 paginas? Page 1 e Page 2.......como manter esse click em modo dark nessa page 2?

[@rocketseat]

Faaala Dev! Tem algumas alternativas para isso, mas creio que a mais simples seria salvar algo no localStorage para salvar essa escolha 💜

[@mywork6882]

@@rocketseat Obrigado pelo seu retorno :)

[@ralfdewrich]

cara veio na hora certa hejdkdkdjfj

[@maykbrito]

aeewww ⏰

[@filipeangelo8586]

Como faço para selecionar varias linhas e depois ir apagando ou add em todas de uma vez?

[@saulotarsobc]

miseravi

[@jorgehenrique2802]

Será que tem como mudar a cor de um svg usando essa mesma lógica? No caso iriam ser ícones e título ( texto ) em svg 🤔

[@euomauricio]

posso usar isso com react? não consegui aplicar..

[@ruijose4803]

acho que tu podia criar um class dark-theme com as variáveis do tema darke e adicionar o tema darke no body quando estiver activo e remover quando estiver inactivo, ele subescreve as variáveis

[@rocketseat]

Valeeu pela sugestão, Rui! 💜

[@renesilvaferreira7942]

top

[@rocketseat]

💜

[@jeffboygames]

Show

[@maykbrito]

💜

[@cerberusdarck]

Acho legal os cursos, mas poderiam citar ao menos a fonte de onde tiraram a ideia né Rocketseat Canal DesignCourse (Gringo - US) kzbin.info/door/VyRiMvfUNMA1UPlDPzG5Ow mesmo Vídeo: kzbin.info/www/bejne/kHy7p5KQfbZpa5Y

[@quinhoriesco]

Sim, citar a fonte era importante...

[@raphaeldefalcoayres]

Pior

[@maykbrito]

Isso mesmo. Desculpem gente. Falha minha. Esqueci de colocar a fonte do html e css na descrição. Já já a gente ajusta 💜

[@rocketseat]

Está certíssimo! Valeu demais pelo feedback! Foi um erro nosso, esquecemos de colocar a citação na descrição! Mas já alteramos e mencionamos por lá o vídeo do DesginCourse! 💜

[@cerberusdarck]

@@rocketseat Acho massa que vocês errem, mas retornem com uma resposta polida e correta, imagino como seja trabalhar com conteúdos nessa correria do dia-a-dia (mais esse problema da quarentena) Parabéns pelo posicionamento ;)

[@filspyrospapabundus]

continua com aulas de css e js que tá show..

[@rocketseat]

Valeu pelo feedback, Isaque! 💜

[@hitallo91]

Cara, uma crítica construtiva, antes eu não gostava dos videos do Mayk , achava muito ruim, travava muito e sem didática. Mas vendo esse vídeo agora pow muito bom. Melhorou bastante, parabéns!

[@maykbrito]

😍

[@rocketseat]

Valeu pelo feedback, Hitallo! 💜

[@RafaelZendron]

Maycão tem como fazer o mesmo com Sass e javascript?

[@rocketseat]

Fala Rafael! Tem sim, usando o Sass seria ainda mais fácil! 💜🚀

[@RafaelZendron]

@@rocketseat fica a dica pra um novo video

[@espinhara]

Salve Viu como eu poderia fazer uma aplicação que muda de linguagem usando o conceito de checkbox com javascript??

[@rocketseat]

Faala Gabriel! Isso é algo um pouco relativo. Você já conhece nossa comunidade no Discord? Por lá temos milhares de devs que podem te ajudar melhor nisso e em muitas outras dúvidas! Segue o Link!: www.rocketseat.com.br/comunidade 💜💜

[@espinhara]

vlw @@rocketseat :-)

[@diegofrancisco7660]

Seu eu escolher o modo darck e reiniciar a tele ele irá continuar darck ou não? Devo salvar algo no storage para isso acontecer?

[@rocketseat]

No modo como feito em aula não Diego, mas você pode por exemplo, salvar o estado escolhido pelo usuário no Local Storage do navegador e buscar essa informação sempre que atualizar a página. 💜

[@josethz00]

Tem como implementar isso em React Native

[@hitallo91]

tem outra forma de fazer, não dessa mesma forma.

[@Matheus-gq7dk]

Existem bibliotecas que ajudam a criar temas dinâmicos no React/React Native. O styled-components é uma biblioteca de CSS-in-JS muito boa que vale o estudo.

[@deveduoliveira]

opa, alguem tem alguma dica ou indicaçao de conteudo sobre, nomeaçao dessas variaveis no css?

[@rocketseat]

Existem algumas convenções que podem ajudar nisso Eduardo. Dá uma pesquisada sobre o BEM no css 😉💜

[@Orareviveremsantidade]

Não estou procurando nada mais fácil , mas existe um jeito tranquilo de fazer esse darkMode/LightMode?

[@maykbrito]

Sim. Poderia modificar as variáveis lá no css, criando um classe... aí, com javascript um simples toggle para adicionar ou tirar a classe =)

[@Orareviveremsantidade]

@@maykbrito Muito obrigado!

[@rocketseat]

💜

[@rodrigoribeiro6632]

Up

[@igorcruz6167]

To a tanto tempo usando React que esqueci como é usar js e html puro seria um problema isso? kkkk

[@nikolasvargas1413]

Sim pra vc entender novas features do javascript :D

[@curtiuseucomentario6203]

14:14

[@danielsilvado6298]

Alguém recomenda um bom material de estude de animações com css ?

[@rocketseat]

Não temos um ainda, mas já anotei aqui como sugestão!! 💜💜

[@mzucs]

Acabei de perceber que não sei usar replace. Q mágica foi esta? Kkkk

[@rocketseat]

Hahaha sempre dá pra aprender! 💜💜