Смена стилей у элементов на странице?

let bodyNight = document.querySelector('.body-night'); 
let breadcrumbNight = document.querySelector('.breadcrumb-night'); 
let breadcrumbSocialNight = document.querySelector('.breadcrumb-social-night'); 
 
let buttonTheme = document.querySelector('.night-user_theme'); 
// УСЛОВИЕ ЕСЛИ В ХРАНИЛИЩЕ С ЭТИМИ КЛАССАМИ НЕТ КЛАССА ACTIVE ТО ДО ДОБАВЛЯЕМ ЕГО 
 
if (localStorage.getItem('body-night', 'breadcrumb-night', 'breadcrumb-social-night') == 'active') { 
bodyNight.classList.add('active'); 
breadcrumbNight.classList.add('active'); 
breadcrumbSocialNight.classList.add('active'); 
 
} 
    
buttonTheme.onclick = function() { 
  bodyNight.classList.toggle('active'); 
  breadcrumbSocialNight.classList.toggle('active'); 
  breadcrumbNight.classList.toggle('active'); 
 
 
  if (localStorage.getItem('body-night', 'breadcrumb-night', 'breadcrumb-social-night') == 'active') { 
  localStorage.removeItem("body-night", "active"); 
  localStorage.removeItem("breadcrumb-night", "active"); 
  localStorage.removeItem("breadcrumb-social-night", "active"); 
 
  } else { 
  localStorage.setItem("body-night", "active"); 
  localStorage.setItem("breadcrumb-night", "active"); 
  localStorage.setItem("breadcrumb-social-night", "active"); 
  
  } 
};

<!-- Начало меню -->   
      <div class="col-lg-3 col-md-4  col-sm-12 col-xs-12"> <!-- style="border: solid 1px green" --> 
            <div class="panel panel-info hidden-xs"> 
              <div class="panel-heading panel-body-night"><div class="sidebar-heading">Поиск</div></div> 
              <div class="panel-body panel-body-night"> 
                <form role="search" action="/search/" method="get"> 
                  <div class="form-group"> 
                    <div class="input-group"> 
                      <input type="search" name="q_search" class="form-control input-night" placeholder="Ваш запрос"> 
                      <div class="input-group-btn"> 
                         <button class="btn btn-default btn-default-night" type="submit"> 
                          <i class="glyphicon glyphicon-search"></i> 
                        </button> 
                      </div> 
                    </div> 
                  </div> 
                </form> 
              </div> 
            </div> 
            <div class="panel panel-info menu-panel_hidden"> 
              <div class="panel-heading panel-heading-night"><div class="sidebar-heading">Авторизация</div></div> 
              <div class="panel-body panel-body-night"> 
                <?php if (!$this->dx_auth->is_logged_in()): ?> 
                   
                 
                <form role="form" action="/auth/login" method="post"> 
                  <div class="form-group"> 
                    <input type="text" class="form-control input-night" placeholder="Логин" name="username"> 
                  </div> 
                  <div class="form-group"> 
                    <input type="password" class="form-control input-night" placeholder="Пароль" name="password"> 
                  </div> 
                  <button type="submit" class="btn btn-default btn-default-night col-lg-5"><i class="fas fa-sign-in-alt"></i> Войти</button> 
                  <!-- <button type="submit" class="btn btn-default col-lg-7 pull-right"><i class="glyphicon glyphicon-list-alt"></i> Регистрация</button> --> 
                  <a href="/auth/register" class="btn btn-default btn-default-night col-lg-7 pull-right"><i class="glyphicon glyphicon-list-alt"></i> Регистрация...</a> 
                </form> 
                <?php else: ?> 
 
                 <?php if($this->dx_auth->is_admin()): ?>  
                    Группа: админы <br> 
                    Логин: <i class="fas fa-user-secret"></i> <?php echo $this->dx_auth->get_username(); ?><br> 
                    Звание: Заслуженный модер СССР 
                     <br> 
 
                    <a href="/auth/logout" class="btn btn-default btn-default-night pull-right"><i class="fas fa-door-open"></i> Выход</a> 
                  <?php else: ?> 
                   
                    Группа: пользователи <br> 
                    Логин: <i class="glyphicon glyphicon-user icon_user"></i> <?php echo $this->dx_auth->get_username(); ?> <br> 
                    Звание: Бродяга <br> 
                     
                    <br> 
                    <a href="/auth/logout" class="btn btn-default btn-default-night pull-right"><i class="fas fa-door-open"></i> Выход</a> 
 
                  <?php endif ?> 
                   
                <?php endif ?> 
              </div> 
            </div> 
 
              <!-- ------------------------------> 
              <div class="panel panel-info"> 
                <div class="panel-heading panel-heading-night"><div class="sidebar-heading">Новости</div></div> 
                <div class="panel-body panel-body-night news_color"> 
 
                  <?php foreach ($hotnews as $key => $value): ?> 
                    <p><a href="/news/view/<?php echo $value['slug']; ?>"><?php echo $value['title']; ?></a></p> 
                  <?php endforeach ?> 
                   
                </div> 
              </div> 
          <!-- Конец меню -->

:root { 
  --bg-main-color: #22272b; 
  --text-main-color: #bfbfbf; 
  --body-main-color: #171c20; 
} 
 
.body-night.active { 
	background-color: var(--body-main-color)!important; 
} 
 
.breadcrumb-social-night.active { 
	background-color: var(--bg-main-color); 
	border: 1px solid #393d41; 
	color: var(--text-main-color)!important; 
} 
 
.breadcrumb-night.active { 
	background-color: var(--bg-main-color); 
	border: 1px solid #393d41; 
} 
 
.panel-body-night.active { 
	background-color: var(--bg-main-color)!important; 
	border: 1px solid #393d41!important; 
	color: var(--text-main-color)!important; 
} 
 
.panel-body-night.active>p>a { 
	color: var(--text-main-color)!important; 
}