Dark Mode no Elementor

[@Nick-xv5ee]

não é possível que esse conteúdo não seja pago tu é MONSTRO demais

[@joaovitorvigarani]

Cipa não é um Web Designer, homi é um pai!

[@RodsEufrasio]

Paraaaaaaa, olha esse conteúdo... O que o Cipa faz é insano demais, não tem como negar isso skskskksksks

[@thiagodesigner2950]

O que ele ensinou é muito melhor do que muitos plugins. Ce tá doido!

[@rogercostadev]

Joga solto, joga limpo, camisa 10 esse Ciparoni. Conteúdo valioso, irmão!

[@luizricardo.design]

3:34 muito bom 😂 excelente conteúdo Cipa, acabei de aplicar num projeto este tutorial! :)

[@danielscustodio]

Para aqueles igual a mim que não querem perder a opção do tema escolhido ao carregar a página, eu acrescentei algumas linhas ao código que o mestre Ciparoni nos ensinou. Esse código não apenas permite a alternância entre temas, mas também salva a escolha do usuário no Local Storage. Isso significa que, mesmo se alguém atualizar a página ou fechar o navegador, a preferência de tema permanecerá intacta. Vou colocar todos os códigos, pois eu fiz um pouco diferente. O CSS e o HTML eu coloquei em uma coluna no menu, porém seguindo o tutorial. HTML: CSS: .dark-mode{ --e-global-color-primary: #0095DA; /* Primário */ --e-global-color-secondary: #A6CE39; /*Secundário*/ --e-global-color-text: #E7E7E7; /*Texto*/ --e-global-color-accent: #A6CE39; /*Acento*/ --e-global-color-7837fdf: #E7E4E4; /*Texto-2*/ --e-global-color-31076ad: #2A2929; /*Background Primário*/ --e-global-color-7be5887: #383838; /*Background Secundário*/ --e-global-color-611dcc8: #EEEEEE000; /* borda*/ } .checkbox-mode{ position: absolute; opacity: 0; } .label-mode{ width: 40px; height: 20px; background-color: #f5f5f5; border-radius: 50px; display: flex; justify-content: space-between; align-items: center; padding: 3px; transform: scale(1.5); position: relative; } .label-mode:hover{ cursor: pointer; } .circle-mode{ width: 12px; height: 12px; background-color: #A6CE39; border-radius: 100%; position: absolute; top: 4px; } .checkbox-mode:checked + .label-mode .circle-mode{ transform: translate(22px); } .checkbox-mode:checked + .label-mode { background-color: #000; } .checkbox-mode + .label-mode { transition: 1.8s; } .fas{ font-size: 10px; } .fa-sun{ color: #fff; } O javascript eu apliquei diretamente na página. Para fazer o mesmo clique na engrenagem(Configurações) no lado inferior esquerdo, depois em "avançado", em seguida cole e edite o código em "Custom JS". const darkToggle = document.querySelector(".dark-toggle"); const checkBox = document.querySelector(".checkbox-mode"); const style = document.querySelector(".elementor-kit-9"); // Carrega o tema salvo do Local Storage ao carregar a página window.onload = getTheme; // Evento de mudança do botão de alternância darkToggle.addEventListener('change', function(){ // Alterna a classe "elementor-kit-9" no CSS style.classList.toggle("dark-mode"); // Obtém o estado atual do checkbox let isChecked = checkBox.checked; // Salva o estado no Local Storage saveTheme(isChecked); }); // Salva o estado do tema no Local Storage function saveTheme(isChecked){ localStorage.setItem('isDark', JSON.stringify(isChecked)); } // Obtém o estado do tema do Local Storage e aplica function getTheme(){ const isDark = JSON.parse(localStorage.getItem("isDark")); if(isDark){ checkBox.checked = true; style.classList.toggle("dark-mode"); } }

[@devjvigarani]

Aonde tem esse 'Custom JS'? Aqui só aparece Custom CSS. Sempre quis adicionar Js, não tendo que adicionar um bloco de código HTML

[@negociosmisteriosos]

Top, vou fazer uma adição de código para carregar o tema salvo do Local Storage e aplicá-lo imediatamente ao carregar a página, em vez de primeiro carregar o tema predefinido e, em seguida, aplicar a cor salva. const darkToggle = document.querySelector(".dark-toggle"); const checkBox = document.querySelector(".checkbox"); const style = document.querySelector(".elementor-kit-6"); // Evento de mudança do botão de alternância darkToggle.addEventListener('change', function(){ // Obtém o estado atual do checkbox let isChecked = checkBox.checked; // Alterna a classe "dark-mode" no CSS com base no estado do checkbox style.classList.toggle("dark-mode", isChecked); // Salva o estado no Local Storage saveTheme(isChecked); }); // Carrega o tema salvo do Local Storage ao carregar a página getTheme(); // Salva o estado do tema no Local Storage function saveTheme(isChecked){ localStorage.setItem('isDark', JSON.stringify(isChecked)); } // Obtém o estado do tema do Local Storage e aplica function getTheme(){ const isDark = JSON.parse(localStorage.getItem("isDark")); if(isDark !== null){ // Atualiza o estado do checkbox e a classe "dark-mode" se o tema estiver definido no Local Storage checkBox.checked = isDark; style.classList.toggle("dark-mode", isDark); } }

[@Charles-cr5fk]

o cara é o pelé do CSS e JavaScript brabo demais.

[@paulolimajr]

Rapaz virei muitoooooo seu fã. Dicas valiosíssimas, em breve farei o curso.

[@RickIISouza]

Não é atoa o seu sucesso! Valeu dmais mestree...

[@gabrielgimenesloureiro7236]

Bom demais, Ciparoni! Muito brabo!

[@mateusmteles]

Simplesmente Brabo!

[@samuxui]

Parabéns pelo conteúdo 🔥🔥

[@Iguassu]

Top, parabéns! Obrigado.

[@guilhermecheida5397]

Estou com um problema, onde NÃO GOSTARIA de mudar as cores, elementos do meu site quando o usuário navega em Darkmode, gostaria de permanecer com as mesmas configurações, porém um cliente me mostrou que navegando em DarkMode algumas seções desconfiguram no modo dark mode, como posso corrigir isso?

[@rogerio8710]

Belo trabalho, muito obrigado.

[@ZaffiroArts]

Existe alguma forma de remover permanente o modo noturno pros visitantes? mesmo que no aparelho deles esteja modo noturno, o modo normal é forçado a ser visualizado... Meu site fica todo desconfigurado no modo noturno e eu não posso reeditar tudo para otimizar isso, vai levar uma vida

[@cristianbautista1659]

Auto match OS?

[@evandronascimento1108]

Ciparoni, boa tarde! Teria como fazer um vídeo semelhante a esse, porém com opção de mudar a cores "primária" e "acent", através de um menu com várias cores? Assim um potencial cliente poderia ver o modelo do site com a cor da marca dele. Obrigado!

[@vickcsilva]

Onde q posso pegar esse código?

[@othonciparoni]

Você pode pegar digitando ele :D

[@FullViewReview]

Fala Galera blz! Conteúdo top demais, mas restou uma dúvida, e se o produtor quiser deixar o site travado ou em ligth ou dark independente da configuração do dispositivo do cliente?

[@evandronascimento1108]

Excelente

[@igorrodrigues7705]

Esse curso de css vai vim forte em

[@victorhenryque]

Salve Othon, surgiu uma duvida aqui, pode me ajudar? Para ficar responsivo em Mobile eu coloco o banner de fundo do tamanho certo, para a versão dark mode aonde eu cololoco o url do banner dark? Como eu escrevo que aquele código se aplica apenas para mudar a imagem na versão mobile? Agradeço desde já, não perco um vídeo seu, você é fera demais! forte abraço.

[@othonciparoni]

Fala, Victor! Você coloca o código dentro de um media query, e bota a url do BG do mobile. Dessa forma: @media(max-width: 767px){ CÓDIGOS AQUI }

[@victorhenryque]

@@othonciparoni Perfeito, deu certo, muito obrigado mesmo, você é o cara! tmj

[@joshuaalexandre9109]

@@victorhenryque amigo, vc consegue mostrar como fez o código pra alterar no mobile? Não consegui aqui

[@evandrobastos-conteudodigi6054]

Parece difícil, mas quando vc vai vendo fica fácil, aí qdo vc vai fazer fica difícil de novo, mas depois de fazer várias vezes continua difícil kkkk

[@raphaelmendonca1763]

monstro

[@joshuaalexandre9109]

Galera, se alguém tiver com dúvidas sobre como colocar a opção de alterar o back pra celular, aqui está como ficaria: @media(max-width: 767px){ .dark-mode.secao1{ background-image: url(URL DA IMAGEM)!important; } } Obs.: talvez não funcione se colcoar na parte de cima do CSS, comigo só funfou quando coloquei no final.