Alternando entre Light Mode/Dark Mode com CSS e Javascript Puro

[@gabrielleno]

Você explica tão bem, não faz igual muitos "professores" que só escrevem código e não explicam uma virgula. Parabéns ótima aula!! ♥

[@lauradeoliveiraribeiro4859]

Gi, você é maravilhosa de verdade. Eu acabei atropelando fases na formação que tive, focando mais no React e tenho mta dúvida ainda em manipulação da Dom de forma prática. Eu adorei demais seu vídeo com Javascript puro ❤️ muito obrigada

[@giovanna.moeller]

aaaaaai que linda, eu fico mto feliz em ler isso! ❤️

[@DianaSilva-px6jz]

Você explica tão calmamente, mas a burra sou eu, boiei total haha mas o problema sou eu mesmo mas está de parabéns! explica cada trecho ♥

[@otiagosantoscode]

Gostei que você faz referências a documentação enquanto explica. Imagino que esse tipo de didática ajuda muito quem está aprendendo e precisa se ligar que essas informações não são um "mistério do além" hehe! Ótimo vídeo!

[@lucasschuster5936]

Meu deus, que conteudo de qualidade! Você não tem noção de como está me ajudando

[@aloissailer]

Tudo ótimo, eu estou adorando seus videos, eles são perfeitos para reforçar minhas aprendizagens, porque pegam um assunto e não são muito longos. Assim vou fazendo bem devagar e testando todos os detalhes. Muito obrigado!!!

[@giovanna.moeller]

muitooo obrigada!!!

[@josequintin2467]

Muito bom, Parabéns!

[@geraldopcf]

JS puro é muito bom, eu jurava que no inicio vc ia fazer assim: const body = document.querySelector('body'); const input = document.querySelector("input"); input.addEventListener("change", function(){ const x = input.checked; if(x == true){ body.style.backgroundColor = 'black'; body.style.color = 'white'; } else { body.style.backgroundColor = 'gray'; body.style.color = 'black'; } }) em fim é bom aprender outra maneira tão sofisticada.

[@ryder5957]

Exato, e nem tivemos que vê um tutorial completo e chato pois ela já explicou no começo.

[@alexandrepeixoto5438]

Excelente conteudo!!!

[@foezx2293]

Não seria mais fácil no caso criar uma classe por exemplo ligth-theme no css que quando adicionado ao body subscreve as variáveis do root ?

[@CRNikolas]

Muito bom conteúdo, gosto muito da sua didática

[@giovanna.moeller]

muito obrigada 💙

[@wizmastery]

Excelente vídeo. Estou começando na programação e sempre quis saber o por trás desse "dark mode". Obs.: Adicionei um "transition" pra ficar mais charmoso kkkkkkk

[@giovanna.moeller]

Perfeito, Vinicius!!! Deve ter ficado lindo hahahah

[@nicolas2T]

vc explica muito bem, msm codadando coloca sua cam ali no cantinho, ficaria muito legal, mas parabéns de vdd pelo canal

[@kennedy2623]

que fonte tu usa no seu vscode ?

[@daniellruben8650]

Primeiro 😄

[@rafinhapo]

Muito bom, qual a extensão para as linhas vermelhas do js, informando o que espera.

[@giovanna.moeller]

error lens eu acho

[@KaikyHenriqueAraujoRodrigues]

olá eu gostaria de saber uma coisa... Como eu faço para quando eu apertar no botão de light mode/dark mode o texto mudar; Pro exemplo o texto é "Está de dia" e quando eu clicar no botão, o texto muda pra "Está de noite". Poderia me ajudar nisso?

[@davibomfim5564]

Não meus amores, simplesmente a MELHOR que temos não aceito que não é minha professora na faculdade.

[@giovanna.moeller]

hahahahaha amei demais esse comentário! mto obrigada ❤️

[@geraldopcf]

Como vc setou o CSS do checkbox background color? que no vídeo onclick vai para pink.

[@giovanna.moeller]

ahhh isso é do sistema do meu macOS!!

[@schiavolima]

Muiiito bom o conteúdo, obrigadooo♥

[@giovanna.moeller]

fico feliz que goste ❤️

[@geraldopcf]

Gi, então podemos deduzir que dependendo do tamanho do projeto o SASS é dispensável? Apesar do SASS ser o Super Power do CSS tem inúmeras funcionalidades com nesting que é aninhar várias tags chamando as variáveis correspondentes, em fim essa é minha visão de iniciante hoje, me corrija se eu estiver errado. Gostei muito sobre o :root eu não tinha parado para estudar algo tão simples e super útil

[@giovanna.moeller]

tudo que você consegue fazer com sass você consegue fazer com css também, afinal ele é transpilado no final de tudo!

[@thalitasousa7278]

Conheci hoje e já se tornou minha inspiração! Você aprendeu com faculdade, curso ou sozinha?

[@Birutadoreddit]

Acompanha ela no insta, lá ela compartilha mais coisas

[@bardX21]

Uma dica da pra fazer isso com apenas uma linha de js

[@giovanna.moeller]

como você faria? coloca aqui pra galera interagir! qualquer comentário e discussão é bem vinda!!

[@bardX21]

@@giovanna.moeller eu ia criar as variáveis no root, e quando clicar no btn do dark mode trocar a classe do body com isso com a classe do body vc pega todos os nomes das variáveis e adiciona lá no css e mude as cores, se estiver com dúvida assista esse vídeo aqui

[@bardX21]

kzbin.info/www/bejne/e3q3naJmiK6Wn8k

[@RyukGoown]

@@bardX21 passa ai o video

[@caducoder]

@@bardX21 cade o vídeo kkk

[@paulojose-pj]

Oiii gostei da aula mas fiquei na pausa no inputContainer.addEventListener('change'. function() ( const isChecked(inputContainer.checked if (isChecked) { o const do "const. is checked" o visual studio não esta reconhecendo o const...

[@giovanna.moeller]

oiii! faltou o igual, const isChecked = inputContainer.checked :) e acho que tem alguns parenteses errado ai também

[@paulojose-pj]

@@giovanna.moeller mesmo assim me ajude só essa pergunta avalie ae

[@paulojose-pj]

//const $html = document.querySelector('html') //const $checkbox = document.querySelector('#switch') //$checkbox.addEventListener('change', function() { // } ) const inputContainer = document.querySelector('input') const lightTheme = { '--cor-primaria': '#e21', '--cor-primaria-escura': '#900', '--fundo-1': '#f7f7f7', '--fundo-2': '#ffffff', '--texto': '#000000', '--subtitulo': '#c6c6c6', } const darkTheme = { '--fundo-1': '#111111', '--fundo-2': '#000000', '--texto': '#ffffff', '--onda': 'url("./img/onda-escura.svg")', } inputContainer.addEventListener ('change'.function() ( const isChecked=inputContainer.checked isChecked ? changeTheme(darkTheme) : changeTheme(lightTheme) )) function chengeTheme(theme) { console.log(theme) for (let prop in theme) { changeProperty(prop. theme[prop]) } } function changeProperty(property, value) { rootElement.style.setProperty(property, value) }

[@paulojose-pj]

Por favor será de grande ajuda mais um inscrito

[@giovanna.moeller]

@@paulojose-pj oie, não sei se to compreendendo bem kkkkk me manda qualquer duvida la na dm do instagram que eu te ajudo melhor!

[@marcosmacedoo_dev]

Qual é a fonte que você usa no VSCode?

[@MrGuitarBoyBrasil]

Deve ser a Dank Mono

[@Caiquefern]

Muito bom!

[@giovanna.moeller]

obrigada!

[@mistygill8469]

𝓅𝓇𝑜𝓂𝑜𝓈𝓂 🌹