Javascript JQuery切换按钮，用于打开或删除该功能

我试图创建一个网站切换复选框，将切换网站的颜色。我不想更改链接的css文件，而是想调用一个函数来更改元素背景颜色和颜色的css，然后当再次单击切换时，站点恢复到其原始状态。我已经尝试过使用jQuery

on（）

和

off（）

，但到目前为止运气不太好。任何帮助都将不胜感激

函数切换颜色（）{
$（'section'）.css（'background-color'，'#fff'）；
$（'section'）.css（'border'，'3px solid#000'）；
};
$（'.switch输入：复选框'）.change（函数（）{
如果（$（this）.is（“：checked”））{
$（此）.addClass（“活动”）；
切换颜色（）；
console.log（'ON'）；
}否则{
$（此）.removeClass（“活动”）；
控制台。登录（“关闭”）；
}
});

执行以下操作：

<label class="switch">
    <input type="checkbox">
    <span class="slider round"></span>
</label>
<style>
   .new-css{
       background-color: #fff;
       border: 3px solid #000;
   }
</style>

创建另一个函数来重置添加的CSS，并在取消选中复选框时调用该函数


函数切换颜色（）{
$（'section'）.css（'background-color'，'cdcdcdcd'）；
$（'section'）.css（'border'，'3px solid#000'）；
};
函数removeColor（）{
$（'section'）.css（'background-color'，'#fff'）；
$（'section'）.css（'border'，'none'）；
}
$（'.switch输入：复选框'）.change（函数（）{
如果（$（this）.is（“：checked”））{
$（此）.addClass（“活动”）；
切换颜色（）；
console.log（'ON'）；
}否则{
$（此）.removeClass（“活动”）；
removeColor（）；
控制台。登录（“关闭”）；
}
});

似乎您正在尝试更改网站主题，为什么不想加载其他css文件并重新加载页面？选中复选框时只需添加一个类，取消选中时删除该类并将css添加到该类。谢谢，现在我添加了第二个css文件，以便在切换时附加当前css文件。
$('.switch input:checkbox').change(function(){
    if ( $(this).is(":checked") ) {
        $(this).addClass("active");
        $('section').addClass("new-css");
    } else {
        $(this).removeClass("active");
        $('section').removeClass("new-css");
    }
});