切换到夜间模式时如何更改表格和元素的颜色？

const container = document.getElementById('container');
const table = document.getElementById('table');
const target = document.getElementById('target');

document.body.style.setProperty('--main-color', '#FF9636');

container.addEventListener('click', () => {
  target.classList.toggle('toggle');
  target.classList.toggle('sun');
  target.classList.toggle('moon');

  if(getComputedStyle(document.body).getPropertyValue('--main-color') == '#FF9636') {
    document.body.style.setProperty('--table-color', '#FFFF00');
    document.body.style.setProperty('--main-color', '#1C3236');
  } else if(getComputedStyle(document.body).getPropertyValue('--main-color') == '#1C3236') {
    document.body.style.setProperty('--table-color', '#00FFFF');
    document.body.style.setProperty('--main-color', '#FF9636');
  }
});

html, body {
  --main-color: #FFFFFF; 
  --table-color: #00FFFF;
  width: 100%;
  
  justify-content: center;
  align-items: center;
  background-color: var(--main-color);
  transition: background-color .3s ease-in-out;
}


#container {
  border-radius: 25px;
height: 30px;
width: 80px;
background-color: var(--main-color);
cursor: pointer;
transition: all .3s ease-in-out;
box-shadow: 0px 0px 15px
rgba(0, 0, 0, .15);
margin: 0px auto;
z-index:999999;
}

table{
  background-color: var(--table-color);
}

#target {
  position: relative;
  left: 0px;
  transition: all .3s ease-in-out;
}

.toggle {
  left: calc(100% - 50px) !important;
}

.sun {
 cursor: pointer;
width: 30px;
height: 30px;
border-radius: 50%;
background-color:
#FFDB73;
}

.sun::before {
 content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
border-radius: 50%;
background-color:
#FFDB73;
opacity: .5;
}

.sun::after {
  content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 55px;
height: 55px;
border-radius: 50%;
background-color:
#FFDB73;
opacity: .3;
}
.table-responsive::after {
    background: #000!important;
border-top: 1px solid
    #fff!important;
    color:white;width:100%!important;
}

.moon {
  cursor: pointer;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #0A515B;
  position: relative;
  z-index: 1;
}

.moon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #0A515B;
  opacity: .5;
}

.moon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75px;
  height: 75px;
  border-radius: 50%;
  background-color: #0A515B;
  opacity: .3;
}

.moon > div {
  position: relative;
  width: 100%;
  height: 100%;
}

.moon > div::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #FFE4BF;
  z-index: 1;
}

.moon > div::after {
  content: '';
  position: absolute;
  top: 10px;
  right: 10px;
  /*transform: translate(-50%, -50%);*/
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #0A515B;
  z-index: 2;
}

<div id='container'>
  <div id='target' class='sun'>
    <div></div>
  </div>
</div>
<table id="table" class="table table-hover">
    <thead>
      <tr>
        <th style="text-align: center;">Заголовок 1</th>
        <th style="text-align: center;">Заголовок 2</th>
        <th class="mob" style="text-align: center;"> Заголовок 3</th> <th style="text-align: center;">Заголовок 4</th> <th class="mob" style="text-align: center;">Заголовок 5</th>

<th> </th>
      </tr>
    </thead><tbody>
<tr>
<td>Данные 1</td>
        <td>Данные 2</td>
      <td>Данные 3</td>
<td>Данные 4</td>
<td>Данные 5</td>
<td>Данные 6</td>
</tr>
</tbody>
</table>