您可以在CSS中定义dark模式样式，并使用jQuery切换dark模式类，而不是更改每个元素。
我假设单击.switch两次会将其更改回lightmode，并且您当前的CSS默认显示lightmode样式。

中央支助组：

#canvas-wrapper.dark-mode {
  background: #222;
  color: #DDD;
}

jQuery：

$(function() {
  $(".switch").click(function() {
    $("#canvas-wrapper").toggleClass("dark-mode");
  });
});

如果你愿意，你也可以使用CSS变量。然而，它仍然会涉及到类切换/更改代码中的某个地方。使用CSS变量但使用普通JS：https://dev.to/ananyaneogi/create-a-dark-light-mode-switch-with-css-variables-34l8

你可能必须为每一个元素写一些css，不管它是在亮模式还是暗模式。使用javascript在两者之间切换。你可以有一个类用于亮模式（.light-mode），然后一个用于暗模式。只要类 Package 器是一个div，你就可以了。
我将使用一个具有全局访问权限的js变量作为模式，并将其绑定到一个函数中。
CSS

.light-mode{

    some more css classes for light mode

}

.dark-mode{

    some more css classes for dark mode

}

你需要使用css和一个目标类，Jquery toggleClass()可以完成这个任务

.bgDark{background: #4a4a4a !important;}

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


<div id="myDiv" class="" style="background: #fff393; border: 1px solid black;  width: 100px; height: 100px"></div>

<button onclick="$('#myDiv').toggleClass('bgDark')">toggle bg</button>

您可以通过一些技巧来解决这个问题，直接回答您的问题是通过实现暗/亮主题的toggleClass。
比如你看这个demo

<div class="change-color">
  <p>Hello World</p>
</div>

<div class="change-color">
  <p>Hello World 2</p>
</div>

<button>Change color</button>

我们的剧本是：

// find elements
var anotherColor = $(".change-color")
var button = $("button")

// handle click and add class
button.on("click", function(){
  anotherColor.toggleClass("another-color")
})

和我们的风格：

body {
  background: #000;
  color: red;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

.another-color {
  background: #ddd;
}

但您也可以通过使用根变量颜色来解决此问题，例如：

:root {
  --color-bg: #000;
}

.default-color {
  background-color: var(--color-bg);
}

.another-color {
  --color-bg: #ddd;
}

您也可以查看此demo

关键要素是，无论您在站点的哪个位置，您都需要JQuery Cookie****来记住您的选择。* 它只会重置为默认状态 *。