使用Javascript更改Boostrap卡CSS

在我的网站上，引导卡的default风格是浅色的，但我有javascript，在晚上/清晨的特定时间内，它会使我的网站主题变暗。我正在尝试将引导卡的样式更改为深色。我已经链接了下面的代码，但它没有按预期工作

let hour=new Date（）.getHours（）；
如果（小时<14 | |小时>20）{
暗模式（）；
}
函数darkMode（）{
var element_body=document.body；
元素_body.classList.toggle（“暗模式body”）；
var links=document.querySelector（“a”）；
/*返回文档中的第一个锚标记*/
links.classList.toggle（“暗模式锚”）；
var cards=document.getElementsByClassName（“卡片背景灯”）；
对于（变量i=0；i

卡片标题
一些示例文本。一些示例文本

您只需添加bg黑暗类即可。您的代码当前引发错误，因为您无法使用

classList.toggle切换多个类

改变

cards[i].classList.toggle("card bg-dark");

到

要将卡中的每个按钮更改为暗样式，您可以使用
document.querySelectorAll
删除btn light类并添加btn dark类

var btns = document.querySelectorAll(".card a.btn");
btns.forEach(btn=>{
    btn.classList.remove("btn-light");
    btn.classList.add("btn-dark");
});

如何更改按钮的颜色？把它从浅色改为浅色dark@TrevorTocchet您可以执行
document.querySelector（'a.btn'）.classList.remove（“btn light”）
和
document.querySelector（'a.btn'）.classList.add（“btn dark”）
@TrevorTocchet有多少个按钮<代码>文档。querySelector

仅选择第一个匹配元素。我只希望它影响引导卡中的按钮（有多个），但上面的代码会影响网站每页上的第一个按钮。

var btns = document.querySelectorAll(".card a.btn");
btns.forEach(btn=>{
    btn.classList.remove("btn-light");
    btn.classList.add("btn-dark");
});