Tips for preserving theme color selection using checkbox across page reloads

Question

Tips for preserving theme color selection using checkbox across page reloads

I have a checkbox that changes the theme between dark and light, with light being the default.

<div class="switch">
    <label>
        <input id="layoutSwitch" type="checkbox"><span class="lever"></span>
    </label>
</div>

Here is the jQuery code I am using:

$('#layoutSwitch').change(function() {
    if($(this).is(":checked")){
        $('#bodyLayout').addClass("bodyLayout"); 
        $('#leftMenu').addClass("leftMenu");
    }else{
        $('#bodyLayout').removeClass("bodyLayout");  
        $('#leftMenu').removeClass("leftMenu");  
    }
});

This is my dark theme CSS:

/* Dark Theme */
.bodyLayout {
    background-color: #525a69; }
       .leftMenu {
          background-color: #252d3a; }\

My goal is to keep the selected theme even after reloading the page, as well as maintain the state of the checkbox selection. However, when attempting to combine the following code with the above code, it doesn't work properly and selects all switches on the page instead of just the one selected.

$(function(){
var test = localStorage.input === 'true'? true: false;
$('input').prop('checked', test || false);
});

$('input').on('change', function() {
localStorage.input = $(this).is(':checked');
console.log($(this).is(':checked'));
});

jquery html css

Answer 1

Answer №1

Here is the solution you were looking for https://jsfiddle.net/jn1we569/6/

$('#layoutSwitch').change(function() {
  $('#bodyLayout').toggleClass("bodyLayout"); 
  $('#leftMenu').toggleClass("leftMenu");
  localStorage.setItem('layoutSwitch', $(this).is(':checked'));
});

localStorage.layoutSwitch === 'true'? $('#layoutSwitch').prop('checked', true).trigger("change"): '';

.bodyLayout {
  height: 100px;
  width: 100px;
  background-color: #525a69; 
}

.leftMenu {
  height: 100px;
  width: 100px;
  background-color: #252d3a; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="switch">
    <label>
        <input id="layoutSwitch" type="checkbox"><span class="lever"></span>
    </label>
</div>

<div id="bodyLayout"></div>
<div id="leftMenu"></div>

This code may not work on stackoverflow due to localStorage, so please refer to the jsfiddle link provided.

To make it work, ensure you have the change event and properly set up your localStorage statement to track the checkbox status.

Instead of manually checking the checkbox status, utilize jQuery's toggleClass method for efficient toggling of classes.

Remember to encapsulate your JavaScript code within

$(document).ready(function(){...});

.

I hope this explanation helps you resolve your issue.

Answer 2

Here is the solution you were looking for https://jsfiddle.net/jn1we569/6/

$('#layoutSwitch').change(function() {
  $('#bodyLayout').toggleClass("bodyLayout"); 
  $('#leftMenu').toggleClass("leftMenu");
  localStorage.setItem('layoutSwitch', $(this).is(':checked'));
});

localStorage.layoutSwitch === 'true'? $('#layoutSwitch').prop('checked', true).trigger("change"): '';

.bodyLayout {
  height: 100px;
  width: 100px;
  background-color: #525a69; 
}

.leftMenu {
  height: 100px;
  width: 100px;
  background-color: #252d3a; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="switch">
    <label>
        <input id="layoutSwitch" type="checkbox"><span class="lever"></span>
    </label>
</div>

<div id="bodyLayout"></div>
<div id="leftMenu"></div>

This code may not work on stackoverflow due to localStorage, so please refer to the jsfiddle link provided.

To make it work, ensure you have the change event and properly set up your localStorage statement to track the checkbox status.

Instead of manually checking the checkbox status, utilize jQuery's toggleClass method for efficient toggling of classes.

Remember to encapsulate your JavaScript code within

$(document).ready(function(){...});

.

I hope this explanation helps you resolve your issue.

Answer 3

Answer №2

$(function(){
var test = localStorage.input === 'true'? true: false;
$('input').prop('checked', test || false);
});

$('input').on('change', function() {
localStorage.input = $(this).is(':checked');
console.log($(this).is(':checked'));
});

This block of code stores the input state in local storage.

An error exists in this code as it applies to all input tags on the page using $('input'). To specifically target the $('#layoutSwitch') checkbox, change $('input') to $('#layoutSwitch').

The corrected version is shown below:

$(function(){
    var test = localStorage.input === 'true'? true: false;
    $('#layoutSwitch').prop('checked', test || false);
    updateTheme();
});

$('#layoutSwitch').on('change', function() {
    localStorage.input = $(this).is(':checked');
    console.log($(this).is(':checked'));    // You can remove this line to avoid logging the value
    updateTheme();
});

function updateTheme()
    if($('#layoutSwitch').is(":checked")){
        $('#bodyLayout').addClass("bodyLayout"); 
        $('#leftMenu').addClass("leftMenu");
    }else{
        $('#bodyLayout').removeClass("bodyLayout");  
        $('#leftMenu').removeClass("leftMenu");  
    }
}

Answer 4

$(function(){
var test = localStorage.input === 'true'? true: false;
$('input').prop('checked', test || false);
});

$('input').on('change', function() {
localStorage.input = $(this).is(':checked');
console.log($(this).is(':checked'));
});

This block of code stores the input state in local storage.

An error exists in this code as it applies to all input tags on the page using $('input'). To specifically target the $('#layoutSwitch') checkbox, change $('input') to $('#layoutSwitch').

The corrected version is shown below:

$(function(){
    var test = localStorage.input === 'true'? true: false;
    $('#layoutSwitch').prop('checked', test || false);
    updateTheme();
});

$('#layoutSwitch').on('change', function() {
    localStorage.input = $(this).is(':checked');
    console.log($(this).is(':checked'));    // You can remove this line to avoid logging the value
    updateTheme();
});

function updateTheme()
    if($('#layoutSwitch').is(":checked")){
        $('#bodyLayout').addClass("bodyLayout"); 
        $('#leftMenu').addClass("leftMenu");
    }else{
        $('#bodyLayout').removeClass("bodyLayout");  
        $('#leftMenu').removeClass("leftMenu");  
    }
}

Answer 5

Answer №3

Modify the ID selector to include input1 and input2

    $(function(){

    for (var selectorId in localStorage){
       if(selectorId.contains("input")){
          var test = localStorage.getItem(selectorId) === 'true'? true: false;

          $('#'selectorId).prop('checked', test || false);
      }
    }


    $('input').on('change', function() {
        var selectorId = $(this).attr("id");
        localStorage[selectorId] = $(this).is(':checked');
        console.log($(this).is(':checked'));
    });


});

Answer 6

Modify the ID selector to include input1 and input2

    $(function(){

    for (var selectorId in localStorage){
       if(selectorId.contains("input")){
          var test = localStorage.getItem(selectorId) === 'true'? true: false;

          $('#'selectorId).prop('checked', test || false);
      }
    }


    $('input').on('change', function() {
        var selectorId = $(this).attr("id");
        localStorage[selectorId] = $(this).is(':checked');
        console.log($(this).is(':checked'));
    });


});

Tips for preserving theme color selection using checkbox across page reloads

Answer №1

Answer №2

Answer №3

Similar questions

Vertical Alignment of Bootstrap Columns

Tips on handling jQuery UI tabs fx: toggle option and using the activate function simultaneously during an event

Image cannot be inserted into the div container

The AJAX function fires only on the first click and does not work upon subsequent clicks when utilizing buttons within dynamically created tables

Can you identify the distinctions between two almost identical HTML emails?

Real-time web page parsing in JAVA is dynamic and constantly evolving

Can the title of href links be concealed?

What is the best way to store a range object obtained from getSelection in order to recreate it on a separate page load?

Using a <button> tag instead of a <div> inside of a <button> is not allowed, as clickable divs are typically frowned upon. What

Is it possible for Bootstrap 5 to extract data from an excel sheet and showcase it in an HTML table?

Looking for a way to upload only part of a large file using HTML and PHP

How can I display an image caption within a lightbox using jQuery?

What is the most effective method to ensure this layout is functioning properly?

A guide to transforming rows into columns with CSS

In Safari, use a reversed angle for a -webkit-linear-gradient

Struggling to customize the style of bootstrap components

Using a subheader in conjunction with a virtual repeater in markdown does not function correctly

Accessing node modules in the index.html file located in the public directory

Spin picture and optimize margins

Create a stunning visual on the canvas using the high-resolution Retina display