Adding LocalStorage functionality to buttons in order to switch colors can be done by storing the

Question

Adding LocalStorage functionality to buttons in order to switch colors can be done by storing the

I've run into an issue trying to incorporate LocalStorage with the buttons that change colors as themes in JavaScript. I'm new to coding and eager to add this feature to my personal blog.

$(document).ready(function () {

$(".header--theme-button").on("click", function() {
  var primaryColor = localStorage.getItem("--theme-primary");
  var secondaryColor = localStorage.getItem("--theme-primary");

  var primaryColor = $(this).css("--theme-primary");
  var secondaryColor = $(this).css("--theme-secondary");


  $().change(function () {
    var primaryColor = $(this).val();
    $('.header--theme-button').css("--theme-primary");
    localStorage.setItem("--theme-primary", primaryColor);
    var secondaryColor = $(this).val();
    $('.header--theme-button').css("--theme-secondary");
    localStorage.setItem("--theme-primary", secondaryColor);
  });

  $(".header--theme-button").removeClass("active");
  $(this).addClass("active");

  $(document.body).css("--primary-color", primaryColor);
  $(document.body).css("--secondary-color", secondaryColor);
});

});

HTML: https://pastebin.com/KswauZRU

CSS: https://pastebin.com/85bH2J5w

javascript html css local-storage

Answer 1

Answer №1

Greetings from the world of stackoverflow! Are you facing errors in your code? It seems like a case where you may be accidentally overwriting primaryColor and secondaryColor.

Here's a revised version for you to try out:

$(document).ready(function() {
  var primaryColor = localStorage.getItem("--primary-color");
  console.log("localstorage primary: " + localStorage.getItem("--primary-color"));
  $(document.body).css("--primary-color", primaryColor);

  var secondaryColor = localStorage.getItem("secondary");
  console.log("localstorage secondary: " + localStorage.getItem("--secondary-color"));
  $(document.body).css("--secondary-color", secondaryColor);

  $( ".header--theme-button" ).each(function() {
    if($(this).css("--theme-primary")==primaryColor){
      console.log("found active element: "+primaryColor);
      $(".header--theme-button").removeClass("active");
      $(this).addClass("active");
    }
  });

  $(".header--theme-button").on("click", function() {

     $(".header--theme-button").removeClass("active");
     $(this).addClass("active");

     var primaryColor = $('.active').css("--theme-primary");
     console.log("primaryColor: " + primaryColor);
     localStorage.setItem("--primary-color", primaryColor);
     $(document.body).css("--primary-color", primaryColor);

     var secondaryColor = $('.active').css("--theme-secondary");
     console.log("secondaryColor: " + secondaryColor);
     localStorage.setItem("--secondary-color", secondaryColor);
     $(document.body).css("--secondary-color", secondaryColor);
   });
 });

I've created a handy fiddle (as the inline snippet didn't cooperate) for you to directly test this solution. Simply hit the "run" button on the top left corner to reload the code and witness the color retention.

Cheers, Paul

Answer 2

Greetings from the world of stackoverflow! Are you facing errors in your code? It seems like a case where you may be accidentally overwriting primaryColor and secondaryColor.

Here's a revised version for you to try out:

$(document).ready(function() {
  var primaryColor = localStorage.getItem("--primary-color");
  console.log("localstorage primary: " + localStorage.getItem("--primary-color"));
  $(document.body).css("--primary-color", primaryColor);

  var secondaryColor = localStorage.getItem("secondary");
  console.log("localstorage secondary: " + localStorage.getItem("--secondary-color"));
  $(document.body).css("--secondary-color", secondaryColor);

  $( ".header--theme-button" ).each(function() {
    if($(this).css("--theme-primary")==primaryColor){
      console.log("found active element: "+primaryColor);
      $(".header--theme-button").removeClass("active");
      $(this).addClass("active");
    }
  });

  $(".header--theme-button").on("click", function() {

     $(".header--theme-button").removeClass("active");
     $(this).addClass("active");

     var primaryColor = $('.active').css("--theme-primary");
     console.log("primaryColor: " + primaryColor);
     localStorage.setItem("--primary-color", primaryColor);
     $(document.body).css("--primary-color", primaryColor);

     var secondaryColor = $('.active').css("--theme-secondary");
     console.log("secondaryColor: " + secondaryColor);
     localStorage.setItem("--secondary-color", secondaryColor);
     $(document.body).css("--secondary-color", secondaryColor);
   });
 });

I've created a handy fiddle (as the inline snippet didn't cooperate) for you to directly test this solution. Simply hit the "run" button on the top left corner to reload the code and witness the color retention.

Cheers, Paul

Answer 3

Answer №2

$(document).ready(function () {

$(".header--theme-button").on("click", function() {


  var baseColor = localStorage.getItem("theme-primary");
  var accentColor = localStorage.getItem("theme-secondary");
  console.log(localStorage.getItem("theme-primary"));
  console.log(localStorage.getItem("theme-secondary"));

  // var primaryColor = $(this).css("--theme-primary");
  // console.log(this);
  // var secondaryColor = $(this).css("--theme-secondary");





  $(".header--theme-button").removeClass("active");
  $(this).addClass("active");

  $(document.body).css("--base-color", baseColor);
  $(document.body).css("--accent-color", accentColor);

  var updatedBaseColor = $('.active').css("--theme-primary");
  localStorage.setItem("theme-primary", updatedBaseColor);
  console.log(updatedBaseColor);
  console.log(localStorage.setItem($('--theme-primary'), updatedBaseColor));
  var updatedAccentColor = $('.active').css("--theme-secondary");
  localStorage.setItem("theme-secondary", updatedAccentColor);
  console.log(updatedBaseColor);
  console.log(updatedAccentColor);

});




});

Hello there! Give this code a try. It now remembers your last color choices!

Answer 4

$(document).ready(function () {

$(".header--theme-button").on("click", function() {


  var baseColor = localStorage.getItem("theme-primary");
  var accentColor = localStorage.getItem("theme-secondary");
  console.log(localStorage.getItem("theme-primary"));
  console.log(localStorage.getItem("theme-secondary"));

  // var primaryColor = $(this).css("--theme-primary");
  // console.log(this);
  // var secondaryColor = $(this).css("--theme-secondary");





  $(".header--theme-button").removeClass("active");
  $(this).addClass("active");

  $(document.body).css("--base-color", baseColor);
  $(document.body).css("--accent-color", accentColor);

  var updatedBaseColor = $('.active').css("--theme-primary");
  localStorage.setItem("theme-primary", updatedBaseColor);
  console.log(updatedBaseColor);
  console.log(localStorage.setItem($('--theme-primary'), updatedBaseColor));
  var updatedAccentColor = $('.active').css("--theme-secondary");
  localStorage.setItem("theme-secondary", updatedAccentColor);
  console.log(updatedBaseColor);
  console.log(updatedAccentColor);

});




});

Hello there! Give this code a try. It now remembers your last color choices!

Adding LocalStorage functionality to buttons in order to switch colors can be done by storing the

Answer №1

Answer №2

Similar questions

After clicking, I would like the text from the list item to have a style of "background-color: aqua" when displayed in the textarea

What could be the reason for the lack of rerendering in this child component?

Create a Bootstrap grid that perfectly fits the viewport without any overflowing content

Unable to configure AngularJS inputs to have a blank default value

Unexpected behavior encountered when implementing specific Textfield validation with Material UI

Injecting data into a Q promise

Utilizing JQuery Mobile to handle multiple forms on a single page and submitting each form uniquely by its ID using JQuery Post

Unable to perform the 'setSelectionRange' function on the 'HTMLInputElement' due to the input element's type being 'number', which does not allow selection

Obtain a compilation of users who have expressed their reaction to a message with a specific emoji on Discord

Stop Gmail from Removing Attached HTML Files

The typeof operator is not functioning as anticipated when used with an ajax response

The situation where a Javascript switch case continues to fall through to the default case even when a 'break' statement

Retrieve events triggered by each element

Utilizing KnockoutJS to Apply CSS Binding Based on Dropdown Selection

ngInfiniteScroll Activates on Every Scroll Occurrence

Font-face src with local() is incompatible with Android devices

Loop through the array while handling a promise internally and ensure completion before proceeding

jquery-powered scrollable content container

Leveraging Next.js to efficiently handle multiple asynchronous requests with NextResponse

Tips for Excluding Content Retrieved Through file_get_contents?