Criar função "dark" no site!

Front-end JavaScript
, , , ,
#1

Opa galera, tudo tranquilo? :wink:
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>

JavaScript
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

#2

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:

3 curtidas
#3

@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.

#4

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 “<”

#5

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.

1 curtida
#6

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.

1 curtida
#7

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.

#8

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>.

1 curtida
#9

Realmente funcionou @wldomiciano!
Muito obrigado :clap: :clap:

1 curtida