Alternar tema claro/escuro com CSS e JavaScript | JAVASCRIP PARA INICIANTES #03

[@sandrohomerozerger3758]

Olá, menino! Muito obrigado por seus ensino. É muito detalhado e me ajudou sobremaneira em meu início como Dev. Parabéns e sucesso!

[@GaiProgramador]

Sucesso irmão tmj!

[@Ctrlcw]

Obrigado, Gai Sensei!

[@lucascarreiro3268]

vlw man , deu uma incrementada usando var no css, para não ter que ficar escolhendo cor por cor.

[@Guerreir0A297]

Valeu cria, mru projeti ficou muito legal graças a tua moral. Caso queiram modificar a cor dos textos, põe *color: white;* no body.dark{}

[@Victor-yd9jz]

vlw carinha!

[@carloseduardodequeirozgerm2341]

Valeu, Amigo! Estava precisando disso para o meu site pessoal! ✌️

[@emersonatenezzi]

Excelente!

[@GaiProgramador]

Obrigado 😃

[@MrPedrostabile]

Gostei muito - muito bom era o que eu precisava no meu site, valeu.. boa sorte

[@diogopaim_]

Obrigado mano, Deus te abençoe 🙏🏾

[@VandyRG]

Vlw mn tava precisando muito para o meu portfólio

[@thauanebispo4244]

Show

[@wpj09]

Mano q vídeo tooop. A muito tempo queria saber como fazer pra mudar o tema. Parabéns

[@GaiProgramador]

Mano que bom que nosso vídeo te ajudou ✌😁 Fico muito feliz em ajudar.

[@ruivelasz]

Video muito bom irmão completo em todos os detalhes!

[@saulotarsobc]

top d+

[@Fractal_reComm]

que tema é esse muito lindo parabens pelo conteudo

[@edimirk9]

Agradeço sua disponibilidade de aprrsentar um ótimo conteúdo, obg

[@GaiProgramador]

Eu que agradeço💥

[@andrelima12]

Parabéns, seus vídeos estão me ajudando muito!

[@GaiProgramador]

Fico feliz em saber

[@jiordanaduarte]

Adorei!!!!!!!!!! Muito obrigada pela aula!

[@gabrielbatista6230]

Valeu, amigo!👍🏻

[@GaiProgramador]

Eu que agradeço😁💥

[@DaviTeixeira-bc5em]

muito obrigado pelo vídeo, estou fazendo projeto para um bootcamp, me salvou dmss

[@GaiProgramador]

Que bom que ajudou

[@Klebersantos-t1r]

monstro

[@thauanebispo4244]

[@lucasribeirodeoliveira694]

Que aula Man meus parabens

[@ivambergsilva591]

VÍDEO MUITO BOM, PARABÉNS, AMIGO. DIDÁTICA LEGAL E VÍDEO BEM DINÂMICO!

[@GaiProgramador]

Valeu pelo reconhecimento 🚀💥

[@mr-tomio]

@@GaiProgramador vi seu repositório e achei o erro.... Eu esqueci de colocar o @import url...

[@GaiProgramador]

@@mr-tomio Ai siim manooo!! Parabéns!!

[@moraes0010]

Cara vlw ajudou muito !

[@danielprimo6487]

6:03 Rapaz não é Live Share não kkkkjk, é Live Server! Live Share é pra codar com um amiguinho! excelente aula parabéns!

[@GaiProgramador]

E isso aí mano kkkkkk a mente bugou feio

[@Aury3925]

aqui pra mim edu certo valeu mano

[@joaoeduardomaia6625]

pode copmpartilahr o código comigo para eu comparar com o meu? aqui deu errado...

[@GaiProgramador]

github.com/Rodrigo322/dark-theme

[@Viktinnn]

Chefia Ótimo video! ajudou de mais to começando a praticar o js e queria fazer um desse pra treinar, a parte do js eu ja sabia to apanhando pro css e html (jesus que negocio de ferrar asudhuasdha)

[@infocelcelulares7420]

👏👏👏👏

[@mr-tomio]

Parabéns pelo vídeo! Fácil e rápido de entender.... Like garantido... Porém quando checked ele não mudou o tema da página... Já revi umas cincos vezes para ver se deixei passar algo.

[@GaiProgramador]

Muito obrigado pelo comentário Jeison!! Eu deixei um link com o repositório do projeto na descrição do vídeo, da uma olhada. Talvez possa te ajudar

[@mr-tomio]

@@GaiProgramador blz obrigado...

[@sabrinamiyamoto993]

conseguiu resolver? estou com o mesmo problema rs

[@mr-tomio]

@@sabrinamiyamoto993 não consegui, acabei tirando do projeto, já que eu tinha pouco tempo para entrega.

[@ronaldodev8080]

cara eu te entendo bem alguns meus também não deu certo não sei bem ao certo o pq, mas esse do video foi tranquilo, no meu caso o erro estava em

[@Stanlayy]

salve mano, e pra mudar a cor de uma div em vez de mudar a do body como que faz? teria que usar document.getElementById('nome da div').toggle('light') em vez de document.body.classList.toggle('light')?

[@GaiProgramador]

Exatamente!

[@BrasilRedeCity]

Obrigado mano🙂

[@SrStark-ud9vl]

pq vc usou uma label ao invez de uma div? não daria certo não?

[@okRyuuji]

terminei de fazer seu video do login, gostaria muito de ver a opção de fazer uma tela de cadastro, qual a % de rolar ? kkkkk parabens pelos videos

[@GaiProgramador]

Olá Raiane! Que bom que vc gostou do vídeo! Existe grandes chances de eu fazer a tela de cadastro em kkkk acho que uns 80% kkkkk

[@okRyuuji]

@@GaiProgramador bora powwww!! Tem criança chorando

[@verasr6112]

Qual o tema do seu vs code ?

[@dogefiote6903]

eu queria saber como incrementar mais texto sem afetar esse scrolling que fizemos

[@junschu]

Parabéns conteúdo tá muito bom, tô maratonando kjkk Tenha uma dúvida, por exemplo se eu quisesse quando checado, ou seja alternando de claro para o tema escuro o background da class "label" ficasse escuro, como eu poderia fazer isso também? Sei que ao informar na class "checkbox : checked" o background ele vai alterar a cor da ball para a escolhida, porém o background da label ainda continua claro

[@italogabriel3654]

Faz um video de como fazer para salvar essa preferencia por favor, pq quando vou pra outras pagina do site volta ao tema claro

[@GaiProgramador]

Provavelmente terá um video no canal abordando o assunto tá 😁😁

[@erickmarcoss]

Eu posso utilizar uma pasta com a imagem dos icones para adicionar no botao do tema? ou so linkando com o JS msm?

[@GaiProgramador]

Acredito que pode usar a pasta com imagens sem problemas.

[@Gi_Ruiva]

kkkkkkkkkkkkkkkkkk só eu pecebi que o título da errado

[@ronaldodev8080]

Cara tentei uns videos rapido de instra etc, até uma aula que tive e meu tema escuro não ia, seu deu certo vlw, estou ainda aprendendo é muita coisa, mas acho legal saber é codar praticar os codigos, to querendo migrar da área design gráfico para dev, parece que tem algo semelhante neh, design ux/ui que não bem um programador mas usa essas linguagem de marcação to querendo me aventurar nisso, tem alguma dica?

[@GaiProgramador]

Cara que massa que o vídeo te ajudou! Fico muito feliz em saber disso. Bom cara dentro do mundo de desenvolvimento tem a área do frontend, onde lidamos com as coisas visuais de uma aplicação. E como vc já vem da área de desing vc vai gostar muito mesmo. A dica que eu vou dar pra vc e uma que talvez vc já saiba. Mais vale a pena reforçar! Estude muito HTML, CSS e JS. Essa a trindade do frontend kkkk Vc não precisa saber tudo dessas linguagens, mais estude o suficiente pra saber como elas funcionam e qual o proposito de cada uma! Espero te ajudado! Te espero no próximo vídeo do canal valeu tmj!

[@ronaldodev8080]

@@GaiProgramador Vou estudar sim pode deixa, obg pelo recado, vou tentar aprender mais e mais até ter confiança em dizer que sei resolver e fazer algo sozinho, eu estou fazendo bootcamp que abrange pouco de tudo tem até reactjs, ele achei bem complicadinho kk

[@ismaelhenrique5405]

Qual o sistema operacional que você está utilizando?

[@GaiProgramador]

Linux com Kubuntu

[@gustavobouofc]

Olá poderia me ajudar? No meu caso meu CSS não funciona, coloco os códigos pra ele centralizar mas não funciona, apenas a cor a figura funciona… nem a bolinha de ativar e desativar tbm não funciona… fiz tudo igual ao seu vídeo poderia me ajudar de alguma forma?

[@GaiProgramador]

Da uma olhada no meu código. Eu deixei o link do repositório do projeto ma descrição do vídeo.

[@CrazySz941]

Mt bom, aliás, qual esse thema ae kkkkkkkk :)

[@GaiProgramador]

O tema é Aura Dark lkkkk valeu pelo comentário 🚀💥😁

[@SrStark-ud9vl]

qual nome desse tema no vscode?

[@viniciusmachado9965]

tenho uma dúvida, como manter o Dark mode mesmo trocando de página ??

[@GaiProgramador]

Opa Vinicius! Uma alternativa seria criar uma variável global booleana, pra quando o valor "true" ser claro.... e false ser escuro... aí vc utiliza essa variável pra mudar o css de todas as páginas. Bom essa seria a forma que eu tentaria fazer, mais com certeza existem maneiras mais eficientes de se fazer isso.

[@viniciusmachado9965]

@@GaiProgramador vlw por tirar a dúvida, a propósito excelente vídeo

[@TALLISVENOMXD]

Meu caso é que eu queria mudar a cor da bolha esquerda do Whatsapp Web pelo JS no Console do Chrome Existe alguma maneira?

[@sarinha1153]

E aquela estrelinha no inicio do css como coloco ela?

[@GaiProgramador]

Aquela estrela é um asterisco *

[@gabrielgeorge9275]

Po eu sei que o vídeo já faz um tempo, mas se alguém puder me ajudar ai depois eu agradeço hahahaha No meu caso, eu tenho um ícone e queria que quando clicasse nele fosse alterado o tema do site, mas só consigo alterar por aquele checkbox. No meu código esse ícone está como uma imagem, como abaixo:

[@TALLISVENOMXD]

Também tô na mesma, só que o meu é referente a uma bolha, queria mudar a cor dela somente usando o JS no Console do Chrome!

[@Hyoga_Joga]

Meu mn como eu faço para na hora do tema ficar escuro a cor fo texto ficar branca para uma melhor visualização

[@kimberlyfigueira1206]

Define lá no css

[@joaoeduardomaia6625]

Mano, não sei o que fiz de errado, mas a partir do ".checkbox:checked + .label .ball{}" nada mais funcionou.... HELP!

[@GaiProgramador]

github.com/Rodrigo322/dark-theme irmão da uma olhada no meu repositorio no github talvez consiga descobrir onde ta o erro.

[@BrasilRedeCity]

mano,quando troco de pagina, o tema volta para o padrao, como que faço para ficar o mesmo tema, vi alguns comentario a baixo porem nao sei fazer o css global

[@rogeriomarques3940]

Aqui ficou também

[@cjagiota9276]

bom dia, eu estou querendo fazer um site com modo escuro utilizando o frame, mas a minha ideia é criar uma barra do frame só para mudar o modo claro e escuro, mas quando eu mudo ele só muda a da pagina que eu fiz o modo escuro, você saberia como eu posso fazer para ele mudar em todas as paginas?

[@GaiProgramador]

Se estiver usando apenas HTML e CSS, vc vai precisar criar um CSS global, para ser compartilhado com todas as telas, e você precisa salvar o dado que idica que está no tema claro ou escuro. E pra isso eu te indico a utilizar o localStorage, para salvar esse dado. Assim sempre que vc mudar de tela vc verifica o dado salvo no localStorage e mostra o tema conforme esse dado.

[@pedrowegner9167]

Hum, e caso eu tenha mais de uma tela html? Como eu mantenho o último tema para a próxima página?

[@GaiProgramador]

Nesse caso vc vai criar o tema de forma global, assim mesmo vc mudando entre as páginas todas elas terão acesso ao tema dark. 😁

[@pedrowegner9167]

@@GaiProgramador Consegui relativamente. O único problema é que quando troco de tela e estou num tema que não é tema base da página, a próxima página pisca super rapidinho do tema base para o tema que eu troco. x.x Mas foi de super ajuda, vlw

[@gustavovinicius9585]

5:10

[@benmoraes5511]

8:16

[@duduoliveira5281]

O meu nao muda de jeito nenhum

[@GaiProgramador]

Opa Dudu! Provavelmente tem algo errado na lógica.... na descrição do vídeo tem o repositório do projeto da uma olhada pra ver se encontra o erro.😁

[@duduoliveira5281]

@@GaiProgramador eu conseguir fazer, eu reparei que você coloca uma classe no body lá no css, só que vc não coloca no html, eu coloquei no html e deu certo

[@JayronFerreira-m2g]

n conseguir fazer :(

[@GaiProgramador]

Por que? Oque houve?

[@playboi_lv]

é só cmg q as coisas nn funcionam nunk ? kskgkgkgksg

[@Lucas.bg08]

qual nome desse tema no vscode?