Criar função "dark" no site!

25 de novembro de 2019 8 respostas Resolvido

_srmattos 25 de novembro de 2019

Opa galera, tudo tranquilo?
Seguinte, estou desenvolvendo um site e queria implementar aquela famosa função “dark” para que o usuario possa escolher.
Pesquisando e garimpando nossa querida internet, consegui ter um certo resultado, criei o tal botão “Dark” e de quebra o “Ligth”. Porem todas ás vezes que a pagina da refresh o site volta ao padrão (branco mesmo).
Meu desejo é fixar essa função para que ela não seja mais alterada.
Gostaria de uma ajudinha de vocês mestres!

Segue o codigo do que já está pronto:

HTML

body id=“bg”>
…
div>
button onclick=“light()” type=“button” >Tema Light
button onclick=“dark()” type=“button” >Tema Dark
/div>

<strong>JavaScript</strong>

function dark()

{

document.getElementById(‘bg’).style.background=’#212121 center center no-repeat’;

}

function light()

{

document.getElementById(‘bg’).style.background=’#e6e6e6 center center no-repeat’;

}

Desde já agradeço a vocês gurus de grande sabedoria

8 Respostas

Mike 25 de nov. de 2019 3 likes

Fala @_srmattos, tranquilo!

Você pode salvar a opção escolhida (dark ou light) no local storage ou no banco de dados, ai quando o usuário entrar no site, o sistema pega o valor que ta no local storage ou então faz uma requisição ao backend para pegar do banco de dados.

A solução com local storage é mais simples de implementar e atende bem o que você quer, então eu optaria por ela, até pq, não sei se você conhece backend e banco de dados.

Segue esses dois materiais:

_srmattos 26 de nov. de 2019

@Mike eu até já fiz alguns trabalhos de Back, mexendo com banco mesmo, porem estava optando por não utilizar nesse site, por ele ser apenas um site de apresentação.
Eu li as matérias, mas confesso que fiquei um tanto confuso quanto a implementação dele no meu projeto. Não consegui captar de que maneira poderia construir esse código.

_srmattos 26 de nov. de 2019

Como eu pegaria esse “document.getElementById(‘bg’).style.background” e chamaria pelo Local Storage no meu “body”?
obs.: Acabei de editar a pergunta principal para aparecel o HTML, tirei todos os “<”

Mike 26 de nov. de 2019 1 like

Na verdade, quando você clicar para escolher uma cor, você seta no localstorage a cor que você quer

localStorage.setItem('tema', opcaoEscolhida);

if(opcaoEscolhida == 'dark') {
    dark();
}

Quando a página abrir, você executa uma função que checa qual o valor da variável tema, se for dark, você chama função dark, senão, chama light.

_srmattos 26 de nov. de 2019 1 like

Galera agradeço ai, a visão de vocês me ajudou a entender um pouco mais!
Porem em um outro fórum um user chamado Sam me deu uma solução alternativa que sanou totalmente meu problema. Segue a solução:

Usando classes CSS e apenas uma função para alternar entre os temas. Basta criar no CSS as duas classes, .dark e .light :

.dark{
   background: #212121 center center no-repeat;
}

.light{
   background: #e6e6e6 center center no-repeat;
}

Nos botões, você chama a mesma função passando como parâmetro o nome de cada classe:

<button onclick="tema('light')" type="button" >Tema Light</button>
<button onclick="tema('dark')" type="button" >Tema Dark</button>

E a função recebe o nome da classe e adiciona no body e cria o localStorage:

function tema(t){
   document.body.classList.add(t)
   localStorage.setItem("tema", t);
}

Ao carregar a página, você verifica se o localStorage com o nome tema tem algum valor e adiciona a classe no body com o valor salvo:

var ls = localStorage.getItem("tema");
if(ls) document.body.classList.add(ls);

Desta forma, o body ficará com uma das duas classes se o localStorage.getItem("tema") existir e tiver valor. Por exemplo:

<body class="dark">

A vantagem de colocar uma classe no body é que você pode depois, se quiser, alterar outros elementos do body , como, por exemplo, alterar a cor do texto da página para branco adicionando color: #fff na classe .dark :

.dark{
   background: #212121 center center no-repeat;
   color: #fff;
}

Só uma obs.: não precisa colocar id na tag body . Já que o body é único na página, basta usar document.body , como coloquei acima.

_srmattos 26 de nov. de 2019

Pequena observação:
antes do botão eu coloquei

<a href="index.html">

Para que sempre houvesse refresh no site, pois notei que quando clicamos por exemplo no “dark” dps do “light” e depois no “dark” dnv ele não armazenada a 3ª situação, mas quando dava refresh ele aplicava a cor.

Solucao aceita

wldomiciano 26 de nov. de 2019 1 like

Não precisa forçar o refresh. Acredito que o problema esteja na função tema().

Nela vc apenas adiciona a nova classe, mas é importante remover a classe antiga.

function tema(t){
  const ls = localStorage.getItem("tema");

  if(ls) document.body.classList.remove(ls);

  document.body.classList.add(t)
  localStorage.setItem("tema", t);
}

Acredito que com o trecho acima vc consiga resolver este problema e voltar a usar <button> ao invés de <a>.

_srmattos 26 de nov. de 2019 1 like

Realmente funcionou @wldomiciano!
Muito obrigado

Criado 25 de novembro de 2019

Ultima resposta 26 de nov. de 2019

Respostas 8

Participantes 3

8 Respostas

Topicos relacionados