Create "dark" function on the site! [closed]

Closed. this question is out of scope and is not currently accepting answers.

Want to improve this question? Update the question so it's on-topic for Stack Overflow.

Closed 1 year ago .

improve this question

I am developing a website and wanted to implement that famous "dark" function so that the user can choose.

Searching and scouring our dear internet, I managed to have a certain result, I created such a button "Dark" and break the "Ligth".

Buttons picture

But every time the Refresh Page the site returns to the default (even white). My desire is to fix this function so that it is no longer changed. I would like a little help from you Masters!

Follows the code of what is already ready:

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’;
}
Author: Victor Laio, 2019-11-26
Source

4 answers

I would do different, using CSS classes and just a function to switch between themes. Just create in CSS the two classes, .dark and .light: 

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

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

In the buttons, you call the same function by passing as a parameter the name of each class: 

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

And the function gets the class name and adds in body and creates the localStorage: 

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

When loading the page, you check if the localStorage with the name tema has any value and add the class in the body with the value except: 

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

This way body will be left with one of the two classes if localStorage.getItem("tema") exists and has value. For example: 

<body class="dark">

The advantage of putting a class in body is that you can then, if you want, change other elements of body, such as changing the color of the page text to white by adding color: #fff in the Class .dark: 

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

Just an obs.: do not need to put id in the body tag. Since body is unique on the page, just use document.body, as I put it above.

 1
Author: Sam, 2019-11-26 14:55:45

You can use cookies or the localStorage API. In this answer, I'll demonstrate how to use localStorage to persist data through the 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');

Basically, localStorage has its methods for getting and defining a value (others too, which I won't mention here).

  • localStorage.getItem: returns the stored value. If there is none, it returns null.
  • localStorage.setItem: sets a value. You must pass in the first argument the key and in the second, the value.

To learn more about localStorage, See:

Note: It is important to emphasize that it is not recommended to use localStorage to store any important information, such as passwords or the like, since it can be easily accessed by the client through the developer tools.

 2
Author: Luiz Felipe, 2019-11-26 14:37:23

Guys, I posted this on another forum and a user named wldomitian me gave the following solution:

Does not need to force refresh. I believe the problem is in the theme () function.

In it vc only adds the new class, but it is important to remove the old class.

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

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

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

I believe that with the above excerpt you can solve this problem and return to using <button> instead of <a>.

Really worked so I'm sharing here with vcs; -)

 0
Author: Selini Design, 2019-11-26 20:45:14

Small remark: before the button I put 

<a href="index.html">

So that there was always refresh on the site, because I noticed that when we clicked for example in the "dark" dps of the " light "and then in the" dark " dnv it did not store the 3rd situation, but when it gave refresh it applied the color.

 -1
Author: Selini Design, 2019-11-26 18:32:36