如何在我的javascript代碼中使用queryselectorAll選擇按鈕 通過應用css來改變他們的主題？
<html>
<head>
<title>
calculator
</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@700&display=swap');
h3 u{
margin-left:85px;
font-family: 'Libre Baskerville', serif;
}
.icons{
margin-bottom: 300px;
margin-left: 500px;
}
.fa-brands{
margin-left: 10px;
margin-top:3px;
font-size: small;
background-color: black;
height:25px;
color:white;
width:118px;
border-radius:3px;
padding-top:5px;
padding-left:7px;
cursor:pointer;
}
.fa-solid{
margin-top:3px;
font-size: small;
background-color: black;
height:25px;
color:white;
width:118px;
border-radius:3px;
padding-top:5px;
padding-left:7px;
cursor:pointer;
}
.container{
display:flex;
flex-direction:row;
width:340px;
height:540px;
margin-left: 500px;
flex-wrap:wrap;
font-weight:bold;
background-color: orange;
border: 3px solid black;
box-shadow:2px 2px 5px black;
}
.button {
height: 70px;
width : 70px;
margin-top: 5px;
margin-right: 5px;
font-weight:bold;
border: 3px solid black;
margin-left:5px;
border-radius:10px;
cursor: pointer;
box-shadow:-1px -1px black;
}
.textfield{
height: 70px;
width: 320px;
margin-left:7px;
border :3px solid black;
border-radius:10px;
cursor: pointer;
box-shadow:-1px -1px black;
font-size: large;
font-weight:bold;
}
.equals{
height: 70px;
width : 155px;
}
.C{
background-color:red ;
height: 70px;
width : 70px;
font-weight:bold;
margin-left: 5px;
border :3px solid black;
border-radius:10px;
cursor: pointer;
box-shadow:-1px -1px black;
}
.adjust{
margin-left:9px;
}
.darkcontainer{
background-color: black;
border: 3px solid white;
}
.darkbutton{
background-color: black;
}
.darkbody{
background-color: black;
}
.darkfa-brands{
border :3px solid white;
}
.darkfa-solid{
border :3px solid white;
}
.darkh3{
color:white;
}
</style>
</head>
<body bgcolor="orange">
<div class = "container" id="A">
<h3 id = "h3"><u>CALCULATOR</u></h3>
<form>
<input class = "textfield" type = "text" placeholder="RESULT" name="text" id ="result">
<input class = "C"type = "reset" value = "AC" title=" All Clear">
<button type = "button" class ="adjust button"title="clear" onclick="text.value =text.value.toString().slice(0,-1)" >DE</button>
<button type = "button" class ="button" onclick="text.value += '.'">.</button>
<button type = "button" class ="button" onclick="text.value += '/'">/</button>
<button type = "button" class ="button" onclick="text.value += 1">1</button>
<button type = "button" class ="button" onclick="text.value += 2">2</button>
<button type = "button" class ="button" onclick="text.value += 3">3</button>
<button type = "button" class ="button" onclick="text.value += '+'">+</button>
<button type = "button" class ="button" onclick="text.value += 4">4</button>
<button type = "button" class ="button" onclick="text.value += 5">5</button>
<button type = "button" class ="button" onclick="text.value += 6">6</button>
<button type = "button" class ="button" onclick="text.value += '-'">-</button>
<button type = "button" class ="button" onclick="text.value += 7">7</button>
<button type = "button" class ="button" onclick="text.value += 8">8</button>
<button type = "button" class ="button" onclick="text.value += 9">9</button>
<button type = "button" class ="button" onclick="text.value += '*'">*</button>
<button type = "button" class ="button" onclick="text.value += '00'">00</button>
<button type = "button" class ="button" onclick="text.value += 0">0</button>
<button type = "button" class ="button equals" onclick="calc()">=</button>
</form>
</div>
<div class = "icons">
<i class="fa-solid fa-circle-half-stroke" onclick="change()" id="fas"> Dark mode</i>
<i class="fa-brands fa-linkedin" id = "fab"> <a href="https://www.linkedin.com/in/ayush-sharma-a155a8267"> Linked in</a> </i>
</div>
<script src="https://kit.fontawesome.com/c803804b72.js" crossorigin="anonymous">
</script>
<script>
function calc(){
let c = document.getElementById('result').value;
document.getElementById('result').value=eval(c);
}
function change(){
let cont = document.getElementById("A");
cont.classList.toggle("darkcontainer");
let bo = document.body;
bo.classList.toggle("darkbody");
let fas = document.getElementById("fas");
fas.classList.toggle("darkfa-solid");
let fab = document.getElementById("fab");
fab.classList.toggle("darkfa-brands");
let h3 = document.getElementById("h3");
h3.classList.toggle("darkh3");
let buttons = document.querySelectorAll(".button");
buttons.classList.toggle("darkbutton")
}
</script>
</body>
</html>