Alternando entre Light Mode/Dark Mode com CSS e Javascript Puro
HTML-код
- Опубликовано: 10 сен 2024
- Oie galera! Aqui quem fala é a Giovanna e no vídeo de hoje vamos entender como podemos alternar entre dark e light mode utilizando apenas HTML, CSS e Javascript de forma pura.
Espero que gostem!
Me acompanhem também no instagram:
/ girl.coding
E em outras redes sociais:
www.giovannamo...
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
aaaaaai que linda, eu fico mto feliz em ler isso! ❤️
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.
Exato, e nem tivemos que vê um tutorial completo e chato pois ela já explicou no começo.
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 ♥
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!
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!! ♥
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!!!
muitooo obrigada!!!
Meu deus, que conteudo de qualidade! Você não tem noção de como está me ajudando
Muito bom, Parabéns!
Excelente conteudo!!!
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 ?
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?
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
Perfeito, Vinicius!!! Deve ter ficado lindo hahahah
que fonte tu usa no seu vscode ?
vc explica muito bem, msm codadando coloca sua cam ali no cantinho, ficaria muito legal, mas parabéns de vdd pelo canal
Muito bom conteúdo, gosto muito da sua didática
muito obrigada 💙
Conheci hoje e já se tornou minha inspiração! Você aprendeu com faculdade, curso ou sozinha?
Acompanha ela no insta, lá ela compartilha mais coisas
Primeiro 😄
Muiiito bom o conteúdo, obrigadooo♥
fico feliz que goste ❤️
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
tudo que você consegue fazer com sass você consegue fazer com css também, afinal ele é transpilado no final de tudo!
Muito bom!
obrigada!
Como vc setou o CSS do checkbox background color? que no vídeo onclick vai para pink.
ahhh isso é do sistema do meu macOS!!
Não meus amores, simplesmente a MELHOR que temos não aceito que não é minha professora na faculdade.
hahahahaha amei demais esse comentário! mto obrigada ❤️
Muito bom, qual a extensão para as linhas vermelhas do js, informando o que espera.
error lens eu acho
Uma dica da pra fazer isso com apenas uma linha de js
como você faria? coloca aqui pra galera interagir! qualquer comentário e discussão é bem vinda!!
@@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
ruclips.net/video/EITlo0SIcig/видео.html
@@bardX21 passa ai o video
@@bardX21 cade o vídeo kkk
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...
oiii! faltou o igual, const isChecked = inputContainer.checked :) e acho que tem alguns parenteses errado ai também
@@giovanna.moeller mesmo assim me ajude só essa pergunta avalie ae
//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)
}
Por favor será de grande ajuda mais um inscrito
@@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!
Qual é a fonte que você usa no VSCode?
Deve ser a Dank Mono
𝓅𝓇𝑜𝓂𝑜𝓈𝓂 🌹