How to toggle data-theme value on click

Question

So I have set up a light and dark theme using variables in css and I want my toggle to change the data theme from "light" to "dark" - how do I do this?

JS

$(document).ready("#toggle_checkbox").click(function() {
    $('body').attr('data-theme', $('body').attr('data-theme') == 'light' ? 'dark' : 'light')
    });

HTML

<body data-theme="light">
    <input type="checkbox" id="toggle_checkbox">
      <label for="toggle_checkbox" onclick="">
          <div id="star">
            <div class="star" id="star-1"></div>
          </div>
      </label>
</body>

Could someone help me understand where I'm going wrong?

I've tried applying the above JS but the click is applied to the whole page (I can click anywhere and it will change the theme) instead of clicking on the input itself.

Thank you! I tweaked it slightly as the syntax was slightly off but that did the trick `$(document).ready(function() { $("#toggle_checkbox").click(function() {});});` — Daniel Ravens, Aug 23 '23 at 18:04

score 1 · Answer 1 · answered Aug 23 '23 at 13:36

This would work and be shorter

$(function() {
  $("#toggle_checkbox").on("click", () => {
    $('body').toggleClass("dark",this.checked)
  });
});

.light { background-color: white;}
.dark { background-color: black;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<body class="light">
  <input type="checkbox" id="toggle_checkbox">
</body>

If you wanted shades of gray, you could do

$(function() {
  const $spans = $("#star span")
    .on("click", function() {
    const cls = this.id;
    $spans.each(function() { $("body").removeClass(this.id)})
    $("body").addClass(cls)
  });
});

.light {
  background-color: white;
}

#star { padding: 0 }

#star span { margin: 0; font-size:36px; }
.star0 {
  background-color: white;
  color:black;
}
.star1 {
  background-color: grey;
  color:white;  
}
.star2 {
  background-color: darkgrey;
  color:white;  
}
.star3 {
  background-color: black;
  color:white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<body class="star0">
  <div id="star">
    <span class="star0" id="star0">*</span><span class="star1" id="star1">*</span><span class="star2" id="star2">*</span><span class="star3" id="star3">*</span>
  </div>
</body>

I've been using `var()` to set colors and then changed the hex value of the colors for each data-theme so this solution works nicely to change a few colours but I wanted to use this for my light/dark theme toggle — Daniel Ravens, Aug 23 '23 at 18:07

score -3 · Answer 2 · answered Aug 23 '23 at 13:09

<body data-theme="light">
  <input type="checkbox" id="toggle_checkbox">
  <label for="toggle_checkbox">
    <div id="star">
      <div class="star" id="star-1"></div>
    </div>
  </label>

  <script>
    $(document).ready(function() {
      $("#toggle_checkbox").click(function() {
        $('body').attr('data-theme', $('body').attr('data-theme') === 'light' ? 
'dark' : 'light');
      });
    });
  </script>
</body>

In this corrected version, I've made sure that the click event is bound to the #toggle_checkbox element within the $(document).ready() function. This ensures that the event binding only occurs after the page has finished loading.

When the checkbox is clicked, the code uses the .attr() method to toggle the value of the data-theme attribute between 'light' and 'dark'. The ternary operator (... ? ... : ...) is used to achieve this toggle behavior.

How to toggle data-theme value on click

2 Answers2