How to change site colors and save in Local Storage?

Question

How can I change site colors & save in localStorage?

I have a function in jQuery to allow users to the change background color of my website. The problem is, if they refresh the page background color automatically goes back to the default. How can I use localStorage with this jQuery function?

$(document).ready(function() {
  /*-- Change color bg WPEAR.COM --*/
  var resultPlaceholder = $('body');
  var greenAndWhite = $('#green-and-white');
  var redAndYellow = $('#red-and-yellow');
  var blueAndPink = $('#blue-and-pink');
  var yellowAndPink = $('#yellow-And-Pink');

  greenAndWhite.click(function() {
    resultPlaceholder.css({
      'background': 'green'
    });
  });
  
  redAndYellow.click(function() {
    resultPlaceholder.css({
      'background': 'red'
    });
  });
  
  blueAndPink.click(function() {
    resultPlaceholder.css({
      'background': 'blue)'
    });
  });
  
  yellowAndPink.click(function() {
    resultPlaceholder.css({
      'background': 'yellow'
    });
  });
})

/* -- change color wpear.com -- */

.button-wrapper {
  position: fixed;
  left: 0;
  display: grid;
  top: 40%;
  margin: 0;
}

.change-color {
  width: 40px;
  height: 40px;
  cursor: pointer;
  border: none;
}

#red-and-yellow {
  background: red;
}

#green-and-white {
  background: green;
}

#blue-and-pink {
  background: blue;
}

#yellow-And-Pink {
  background: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div class='button-wrapper'>
  <button class='change-color' id='green-and-white' />
  <button class='change-color' id='red-and-yellow' />
  <button class='change-color' id='blue-and-pink' />
  <button class='change-color' id='yellow-And-Pink' />
</div>

Does this provide a solution for you: https://stackoverflow.com/a/61532720/2181514 — freedomn-m, Jul 21 '22 at 07:46
There's numerous solutions on SO - just finding them may be a little bit harder. — freedomn-m, Jul 21 '22 at 07:47
I added another answer because of your deleted question from today... — biberman, Nov 29 '22 at 13:11

score 2 · Answer 1 · answered Jul 21 '22 at 07:42

Write a function to save the selected theme to localStorage:

function saveTheme(color) {
   localStorage.setItem('theme', color)
}

Save theme on every change:

greenAndWhite.click(function(){
   resultPlaceholder.css({'background':'var(--linear-graBO)'});
   saveTheme('var(--linear-graBO)')
});
// do this for each change

When page loads - check localStorage for saved theme [put in the <head> so it should run immediately]:

const savedTheme = localStorage.getItem('theme')
if (savedTheme) {
   document.body.style.background = savedTheme
}

Rory McCrossan · Accepted Answer · 2022-11-29T10:34:19.160

0

To do what you require simply set the localStorage value in the click handler. Then read it back out and set it when the page next loads:

Also note that your JS code can be DRY'd up by using the same event handler for all button elements and setting the background to match the clicked button.

jQuery($ => {
  let $body = $('body');
  let defaultBgColor = localStorage.getItem('body-bg-color');
  defaultBgColor && $body.css('background-color', defaultBgColor);

  $('.change-color').on('click', e => {
    let bgColor = $(e.target).css('background-color');
    $body.css('background-color', bgColor);
    localStorage.setItem('body-bg-color', bgColor);
  });
});

Finally, note the use of background-color, not background. The latter is a shortcut and using it to set the background color only may override other background-related styling.

Here's a working jsFiddle example, as SO snippets are sandboxed and don't allow access to localStorage.

edited Nov 29 '22 at 10:34

answered Jul 21 '22 at 08:28

Rory McCrossan

331,213
40
305
339

Hi , how are you , can you help please , how i can change color text with background for each click – Ahmed Attouri Nov 28 '22 at 12:49
Set the styling in CSS using a class, then use `addClass()` or `toggleClass()` to update the DOM using jQuery. There are lots of examples and questions covering this if you research – Rory McCrossan Nov 28 '22 at 14:04
I tried adding color: #fff ; for each class and it didn't work – Ahmed Attouri Nov 28 '22 at 14:46
Can you add this for script – Ahmed Attouri Nov 28 '22 at 14:59
Here you go: https://jsfiddle.net/sfvwq2Ld/ – Rory McCrossan Nov 28 '22 at 16:07
It will ask me to add all the identifiers for each color. Isn't that tiring? – Ahmed Attouri Nov 28 '22 at 18:04
Help me brother , can add changing color text without addClass like background ? – Ahmed Attouri Nov 29 '22 at 08:03
Sure, just use `css('color', yourColorHere)` as you did for the backgrond. – Rory McCrossan Nov 29 '22 at 10:36
but this one color for all background , i need one color for each background without addClass ! – Ahmed Attouri Nov 29 '22 at 10:42
I don't understand what you mean. I would suggest you start a new question with a clear explanation of your goal. – Rory McCrossan Nov 29 '22 at 10:42
In the script, you can change the background only by adding the color in CSS. I also want to change the color of the text as shown in the background color , you understand me or not ? – Ahmed Attouri Nov 29 '22 at 12:44

biberman · Answer 3 · 2022-11-30T11:57:40.930

Referring to your deleted question from today:

If you also want the text to change its color together with the background of the body, you can use the same jQuery css() method to manipulate the color property of the text:

$('#text').css('color', bgColor);

Working example:

i removed the localStorage stuff, for demonstration in the stack snippet
i added a white background for the text to see the effect

jQuery($ => {
  let $body = $('body');
  let defaultBgColor = 'white';
  defaultBgColor && $body.css('background-color', defaultBgColor);

  $('.change-color').on('click', e => {
    let bgColor = $(e.target).css('background-color');
    $body.css('background-color', bgColor);
    $('#text').css('color', bgColor);
    defaultBgColor = bgColor;
  });
});

.button-wrapper {
  position: fixed;
  left: 0;
  display: grid;
  top: 40%;
  margin: 0;
}

#text {
  background-color: white;
}

.change-color {
  width: 40px;
  height: 40px;
  cursor: pointer;
  border: none;
}

#c1 {
  background: red;
  color: #fff;
}

#c2 {
  background: green;
  color: #000;
}

#c3 {
  background: blue;
  color: #fff;
}

#c4 {
  background: yellow;
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='button-wrapper'>
  <button class='change-color' id='c1' />
  <button class='change-color' id='c2' />
  <button class='change-color' id='c3' />
  <button class='change-color' id='c4' />
</div>

<div id='text'>
  hello every body
</div>

If you also want to change the text colors you need to define the color combinations. That can be done for example with an if else chain, a switch case statement, an array or an object. But be aware, that the css() method only returns RGB colors...

definition in an object:

const color_combinations = {
  'rgb(255, 0, 0)': 'yellow',
  'rgb(0, 128, 0)': 'white',
  'rgb(0, 0, 255)': 'orange',
  'rgb(255, 255, 0)': 'black'
};
...
let bgColor = $(e.target).css('background-color');
$('#text').css('color', color_combinations[bgColor]);

Working example:

jQuery($ => {
  let $body = $('body');
  let defaultBgColor = 'white';
  const color_combinations = {
    'rgb(255, 0, 0)': 'yellow',
    'rgb(0, 128, 0)': 'white',
    'rgb(0, 0, 255)': 'orange',
    'rgb(255, 255, 0)': 'black'
  };
  defaultBgColor && $body.css('background-color', defaultBgColor);

  $('.change-color').on('click', e => {
    let bgColor = $(e.target).css('background-color');
    
    $body.css('background-color', bgColor);
    $('#text').css('color', color_combinations[bgColor]);
    defaultBgColor = bgColor;
  });
});

.button-wrapper {
  position: fixed;
  left: 0;
  display: grid;
  top: 40%;
  margin: 0;
}

.change-color {
  width: 40px;
  height: 40px;
  cursor: pointer;
  border: none;
}

#c1 {
  background: red;
  color: #fff;
}

#c2 {
  background: green;
  color: #000;
}

#c3 {
  background: blue;
  color: #fff;
}

#c4 {
  background: yellow;
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class='button-wrapper'>
  <button class='change-color' id='c1' />
  <button class='change-color' id='c2' />
  <button class='change-color' id='c3' />
  <button class='change-color' id='c4' />
</div>

<div id='text'>
  hello every body
</div>

I tried this script, but what I want is to change the color of the word with the css code. I mean, when the background is black, the color of the word is white. If the background is green, the color of the word will be white, and all colors can be controlled in the css code only from the script. I notice in the css code, color: #000; and background: green ; but the background works and the color of the word does not work, I think you understood me — Ahmed Attouri, Nov 29 '22 at 18:15
If you want another color for the text than the background, you need to define the combinations, for example in an array or a series of ``if`` and ``else`` statements. I will implement some example combinations in the snippet... — biberman, Nov 30 '22 at 11:37

How to change site colors and save in Local Storage?

3 Answers3