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"); } }
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); } }
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?
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?
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!
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
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.
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.
não é possível que esse conteúdo não seja pago
tu é MONSTRO demais
Cipa não é um Web Designer, homi é um pai!
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");
}
}
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
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);
}
}
O que ele ensinou é muito melhor do que muitos plugins. Ce tá doido!
Paraaaaaaa, olha esse conteúdo... O que o Cipa faz é insano demais, não tem como negar isso skskskksksks
Joga solto, joga limpo, camisa 10 esse Ciparoni. Conteúdo valioso, irmão!
o cara é o pelé do CSS e JavaScript brabo demais.
3:34 muito bom 😂 excelente conteúdo Cipa, acabei de aplicar num projeto este tutorial! :)
Rapaz virei muitoooooo seu fã.
Dicas valiosíssimas, em breve farei o curso.
Não é atoa o seu sucesso! Valeu dmais mestree...
Parabéns pelo conteúdo 🔥🔥
Bom demais, Ciparoni! Muito brabo!
Simplesmente Brabo!
Top, parabéns! Obrigado.
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?
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?
Excelente
Belo trabalho, muito obrigado.
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!
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
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
Onde q posso pegar esse código?
Você pode pegar digitando ele :D
Esse curso de css vai vim forte em
Auto match OS?
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.
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
}
@@othonciparoni Perfeito, deu certo, muito obrigado mesmo, você é o cara! tmj
@@victorhenryque amigo, vc consegue mostrar como fez o código pra alterar no mobile? Não consegui aqui
monstro
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.