如何使用切换更改正文背景颜色

    $(function() {
      $('#toggle-event').click(function() {
        $('body').toggleClass('nightmode');
    })
    });

.nightmode {
    background-color: red;
}
.slow{
	transition: left 0.7s;
    -webkit-transition: left 0.7s;
}
.cmn-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}
.cmn-toggle + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;
}
input.togglecss + label {
  padding: 2px;
  width: 85px;
  height: 25px;
  background-color: #dddddd;
  border-radius: 60px;
}
input.togglecss + label:before,
input.togglecss + label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}
input.togglecss + label:before {
  right: 1px;
  background-color: #f1f1f1;
  border-radius: 60px;
  transition: background 0.4s;
}
input.togglecss + label:after {
  width: 25px;
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: margin 0.4s;
}
input.togglecss:checked + label:before {
  background-color: #8ce196;
}
input.togglecss:checked + label:after {
  margin-left: 65px;
}

        <div class="switch">
          <input id="cmn-toggle toggle-event" class="cmn-toggle togglecss" type="checkbox" data-toggle="toggle" data-style="slow">
          <label for="cmn-toggle"></label>
        </div>

我认为您的代码中的主要问题就在这里：

.cmn-toggle {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}

没有什么会触发JavaScript。

另一个问题是，正如brod所说，有多个id值。我修改了这些，它有效。

例

试试下面的例子

$(".my").click(function () {
   $(this).toggleClass("green");
});

.my { width: 50px; height: 50px; background-color: #336699; }
.my:hover, .place.green { background-color: #00cc00; }

<div class="my">
</div>

<===

======================================================================>

<div id="div1">CSS Pseudo Classes (not cross browser) :hover :active</div>
<div id="div2">jQuery Click to CSS</div>
<div id="div3">jQuery Click to CSS</div>
<div id="div4">jQuery Click to Toggle</div>
<div id="div5">jQuery Mousedown/MouseUp</div>
<div id="div6">jQuery Toggle</div>

<================================================================================================================================================================================================

>===============================

div {
    background-color: green;
    border: 3px groove;
    cursor: pointer;
    margin: 1em;
    padding: 1em;
    text-align: center;
}
.back-green { background-color: green; }
.back-red { background-color: red; }
#div1:hover {
    background-color: yellow;
}
#div1:active {
    background-color: red;
}

<=======================================================================================================>=============================================================================================

==============================

$("#div2").on("click", function() {
    $(this).css("background-color", "red");
});
$("#div3").on("click", function() {
    $(this).css({ backgroundColor: "red" });
});
$("#div4").on("click", function() {
    $(this).toggleClass('back-red');
});
$("#div5").on("mousedown", function() {
    $(this).toggleClass('back-red');
})
.on("mouseup", function(e) {
    $(this).toggleClass('back-red');
});
$("#div6").toggle(function() {
    $(this).css("background-color", "red");
}, 
function() {
    $(this).css("background-color", "");
});

这是它的工作小提琴：小提琴:)

现在在这里我正在更改多个div的颜色，但您可以使用它来更改网站的背景颜色....

谢谢和干杯

我只是做了一个更简单的函数（没有jQuery），它在切换器上的"onchange"事件中切换背景颜色。类/ID名称也已更新（并删除了不必要的名称）。

function changeit() {
var shortget = document.getElementsByTagName("body")[0];
var aaa = shortget.style.backgroundColor;
    
if (aaa == "black") {
shortget.style.backgroundColor = "lavender";  
} else {
shortget.style.backgroundColor = "black"; 
}
    
}

body {
  background-color:lavender;
  transition: all 1s;
  -webkit-transition: all 1s;
}
.switcher {
  position: absolute;
  margin-left: -9999px;
  visibility: hidden;
}
.switcher + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;
}
input.switcher + label {
  padding: 2px;
  width: 85px;
  height: 25px;
  background-color: transparent;
  border-radius: 60px;
}
input.switcher + label:before,
input.switcher + label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}
input.switcher + label:before {
  right: 1px;
  background-color: black;
  border-radius: 60px;
  transition: background 0.4s;
}
input.switcher + label:after {
  width: 25px;
  background-color: #fff;
  border-radius: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: margin 0.4s;
}
input.switcher:checked + label:before {
  background-color: lavender;
}
input.switcher:checked + label:after {
  margin-left: 65px;
}

<div class="switch">
<input id="switcher" class="switcher" type="checkbox" onchange="changeit()">
<label for="switcher"></label>
</div>

html

<select name="my-select" class="js-my-select">
  <option value="nothing" selected>Select Color</option>
  <option value="red">Red</option>
  <option value="orange">Orange</option>
  <option value="yellow">Yellow</option>
  <option value="blue">Blue</option>
  <option value="green">Green</option>
</select>
<div class="js-my-image red"></div>
<div class="js-my-image orange"></div>
<div class="js-my-image yellow"></div>
<div class="js-my-image blue"></div>
<div class="js-my-image green"></div>

.css

div {
  display: none;
  height: 50px;
  width: 50px;
}
.red {
  background-color: red;
}
.orange {
  background-color: orange;
}
.yellow {
  background-color: yellow;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}

.js

$(function() {
  var $select = $('.js-my-select'),
      $images =  $('.js-my-image');
  $select.on('change', function() {
    var value = '.' + $(this).val();
    $images.show().not(value).hide();
  });
});