-2
<div onclick="theme()" class="theme">
    <img id ="theme"src="elements/dark.svg"/>
</div>```

______________________________________________

let bodydark = document.getElementById('body');

function theme() {
    document.getElementById("theme").src="elements/light.png";
    change_theme();
}

function change_theme() {
    bodydark.style.background = 'var(--overlay)';
    
    let div_wrapper = document.getElementById("q1").style.backgroundColor = '#091b38';
    let div_wrapper1 = document.getElementById("q2").style.backgroundColor = '#091b38';
    let div_wrapper2 = document.getElementById("q3").style.backgroundColor = '#091b38';
}

Basicamente esse código ao clicar na div uma funçao theme() altera o src da div e muda o tema para dark, gostaria que fosse possível ao clicar novamente na div voltar ao padrão, parecido como o alterar tema do google chrome. Por favor me ajudemm! não sei se a palavra certa seria desativar a funcao ja existente, mas eu tentei colocar 2 functions dentro da div, uma para mudar o tema e outra pra dar um reloader na página, mas meio que uma entra em conflito na outra e executa as duas ao mesmo tempo e a pagina fica dark e recarrega assim por diante!

2 Respostas 2

-2

Acho que o melhor jeito de fazer isso seria alternando a classe da div, entre o css dark e o css light css:

.dark_theme{
    color: #ffffff;
    background-color: #000000
}

.light_theme{
    color: #000000;
    background-color: #ffffff
}

e no js

let isDark = false;
function theme() {
    if(isDark){
        document.getElementById("theme").src="elements/light.png";
        bodydark.classList.toggle("light_theme")
        isDark = false;
        return;
    }
    document.getElementById("theme").src="elements/dark.png";
    bodydark.classList.toggle("dark_theme")
    isDark = true;
}

o css é só um exemplo você poderia colocar tudo o que quer mudar do body no caso e também não esqueça de começar a div que quer mudar com uma dessas classes

1
  • Sim, boa ideia, obrigadoo!
    – romao
    Commented 25/06/2021 às 0:43
-2

Você pode adicionar uma flag na sua div e na função theme só verificar. Se a flag for dark você seta light e vice e versa. por exemplo:

function theme(element) {

    console.log(element.getAttribute('flag'));

    if (element.getAttribute('flag') == 'dark'){
        document.getElementById('theme').setAttribute('src', 'elements/light.png');
        element.setAttribute('flag', 'light');
    }else{
        document.getElementById('theme').setAttribute('src', 'elements/dark.svg');
        element.setAttribute('flag', 'dark');
    }

}
<div onclick="theme(this)" class="theme" flag="dark">
    <img id="theme" src="elements/dark.svg"/>
</div>

1
  • Deu certo aqui, exatamente o que eu queria. Obrigadoo!
    – romao
    Commented 25/06/2021 às 0:42

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .