5

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

Imagem dos botões

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 código do que já está pronto:

HTML

<body id=“bg”>
…
div>
<button onclick=“light()” type=“button” >Tema Light</button>
<button onclick=“dark()” type=“button” >Tema Dark</button>
</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’;
}
3
  • Você vai ter que armazenar a informação em um cookie ou no seu banco de dados e setar quando estiver carregando a página em questão Commented 26/11/2019 às 14:26
  • Não entendi o uso de id na tag body. Vc vai ter mais de um body na página?
    – Sam
    Commented 26/11/2019 às 14:32
  • Possível duplicata de Mudar o estilo/tema do site e armazená-lo no LocalStorage
    – Woss
    Commented 26/11/2019 às 14:33

4 Respostas 4

2

Você pode utilizar cookies ou a API do localStorage. Nessa resposta, demonstrarei como usar o localStorage para persistir dados pelo front-end.

const lightButton = document.querySelector('#light-theme-trigger');
const darkButton = document.querySelector('#dark-theme-trigger');

// Adicionamos os listeners:
lightButton.addEventListener('click', () => setTheme('light'));
darkButton.addEventListener('click', () => setTheme('dark'));

// Criamos a função que irá ficar responsável pela troca do tema:
function setTheme(themeName) {
  // Salvamos no localStorage:
  localStorage.setItem('site-theme', themeName);

  // E aqui você pode fazer o que quiser com o nome do tema,
  // como aplicar os estilos.
}

// Executamos a função sempre que a página é carregada, passando
// o tema salvo no `localStorage`. Note que usei o `light` como
// fallback caso nenhum estiver definido no storage.
setTheme(localStorage.getItem('site-theme') || 'light');

Basicamente, o localStorage tem seus métodos para obter e definir um valor (outros também, os quais não citarei aqui).

  • localStorage.getItem: Retorna o valor armazenado. Caso não houver, retornará null.
  • localStorage.setItem: Define um valor. Você deve passar no primeiro argumento a chave e no segundo, o valor.

Para saber mais sobre o localStorage, consulte:

Nota: É importante enfatizar que não é recomendado usar o localStorage para armazenar nenhuma informação importante, como senhas ou afins, já que pode ser acessado facilmente pelo cliente através das ferramentas do desenvolvedor.

1
  • Muito obrigado Luiz a partir do seu modo de vista pude aprender um pouco mais! Tmj Commented 26/11/2019 às 18:14
1

Eu faria diferente, 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
  • Cara isso solucionou perfeitamente o meu problema, muito obrigado, tmj Commented 26/11/2019 às 18:15
0

Galera, postei isso em outro fórum e um user chamado wldomiciano me deu a seguinte solução:

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

Realmente funcionou então estou compartilhando aqui com vcs ;-)

-1

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.

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