Изменить цвет вертикальное меню

---

Привет, я хочу изменить цвет вертикального меню, когда открываю его с помощью коллапса

код CSS:

  1  .list-unstyled {
  2      padding-right: 0;
  3      list-style: none;
  4  }
  5  
  6  p {
  7      font-size: 1.1em;
  8      font-weight: 300;
  9      line-height: 1.7em;
 10      color: #999;
 11  }
 12  
 13  a,
 14  a:hover,
 15  a:focus {
 16      color: inherit;
 17      text-decoration: none;
 18      transition: all 0.3s;
 19  }
 20  
 21  .navbar {
 22      padding: 15px 10px;
 23      background: #fff;
 24      border: none;
 25      border-radius: 0;
 26      margin-bottom: 40px;
 27      box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
 28  }
 29  
 30  .navbar-btn {
 31      box-shadow: none;
 32      outline: none !important;
 33      border: none;
 34  }
 35  
 36  .line {
 37      width: 100%;
 38      height: 1px;
 39      border-bottom: 1px dashed #ddd;
 40      margin: 40px 0;
 41  }
 42  
 43  i,
 44  span {
 45      display: inline-block;
 46  }
 47  
 48  .wrapper {
 49      display: flex;
 50      align-items: stretch;
 51  }
 52  
 53  #sidebar {
 54      min-width: 175px;
 55      max-width: 175px;
 56      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #646f7f), color-stop(100%, #4a5564));
 57      background-image: -moz-linear-gradient(#646f7f, #4a5564);
 58      background-image: -webkit-linear-gradient(#646f7f, #4a5564);
 59      background-image: linear-gradient(#646f7f, #4a5564);
 60      /*border-top: 1px solid #858d99;*/
 61      color: #fff;
 62      opacity: .95;
 63      transition: all 0.3s;
 64  }
 65  
 66      #sidebar.active {
 67          min-width: 80px;
 68          max-width: 80px;
 69          text-align: center;
 70      }
 71  
 72          #sidebar.active .sidebar-header h3,
 73          #sidebar.active .CTAs {
 74              display: none;
 75          }
 76  
 77          #sidebar.active .sidebar-header strong {
 78              display: block;
 79          }
 80  
 81      #sidebar ul li a {
 82          text-align: right;
 83      }
 84  
 85      #sidebar.active ul li a {
 86          padding: 20px 10px;
 87          text-align: center;
 88          font-size: 0.55em;
 89      }
 90  
 91          #sidebar.active ul li a i {
 92              margin-right: 0;
 93              display: block;
 94              font-size: 1.8em;
 95              margin-bottom: 5px;
 96          }
 97  
 98      #sidebar.active ul ul a {
 99          padding: 10px !important;
100      }
101  
102      #sidebar.active .dropdown-toggle::after {
103          top: auto;
104          bottom: 10px;
105          left: 50%;
106          -webkit-transform: translateX(50%);
107          -ms-transform: translateX(50%);
108          transform: translateX(50%);
109      }
110  
111      #sidebar .sidebar-header {
112          padding: 10px 5px 5px;
113          background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #646f7f), color-stop(100%, #4a5564));
114          background-image: -moz-linear-gradient(#646f7f, #4a5564);
115          background-image: -webkit-linear-gradient(#646f7f, #4a5564);
116          background-image: linear-gradient(#646f7f, #4a5564);
117          /*border-top: 1px solid #858d99;*/
118      }
119  
120          #sidebar .sidebar-header strong {
121              display: none;
122              font-size: 1.8em;
123          }
124  
125      #sidebar ul.components {
126          padding: 20px 0;
127          /*border-bottom: 1px solid #47748b;*/
128      }
129  
130      #sidebar ul li a {
131          padding: 10px;
132          font-size: .9em;
133          display: block;
134      }
135  
136          #sidebar ul li a:hover {
137              color: #646f7f;
138              background: #fff;
139          }
140  
141          #sidebar ul li a i {
142              margin-left: 10px;
143          }
144  
145      #sidebar ul li.active > a,
146      a[aria-expanded="true"] {
147          color: #fff;
148          background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #646f7f), color-stop(100%, #4a5564));
149          background-image: -moz-linear-gradient(#646f7f, #4a5564);
150          background-image: -webkit-linear-gradient(#646f7f, #4a5564);
151          background-image: linear-gradient(#646f7f, #4a5564);
152          /*border-top: 1px solid #858d99;*/
153      }
154  
155  a[data-toggle="collapse"] {
156      position: relative;
157  }
158  
159  /*.dropdown-toggle::after {
160      display: block;
161      position: absolute;
162      top: 50%;
163      right: 20px;
164      transform: translateY(-50%);
165  }*/
166  
167  ul ul a {
168      font-size: 0.6em !important;
169      padding-right: 30px !important;
170      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #646f7f), color-stop(100%, #4a5564));
171      background-image: -moz-linear-gradient(#646f7f, #4a5564);
172      background-image: -webkit-linear-gradient(#646f7f, #4a5564);
173      background-image: linear-gradient(#646f7f, #4a5564);
174      /*border-top: 1px solid #858d99;*/
175  }
176  
177  ul.CTAs {
178      padding: 20px;
179  }
180  
181      ul.CTAs a {
182          text-align: center;
183          font-size: 0.9em !important;
184          display: block;
185          border-radius: 5px;
186          margin-bottom: 5px;
187      }
188  
189  a.download {
190      background: #fff;
191      color: #646f7f;
192  }
193  
194  a.article,
195  a.article:hover {
196      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #646f7f), color-stop(100%, #4a5564));
197      background-image: -moz-linear-gradient(#646f7f, #4a5564);
198      background-image: -webkit-linear-gradient(#646f7f, #4a5564);
199      background-image: linear-gradient(#646f7f, #4a5564);
200      /*border-top: 1px solid #858d99;*/
201      color: #fff !important;
202  }
203  
204  /* ---------------------------------------------------
205      CONTENT STYLE
206  ----------------------------------------------------- */
207  #content {
208      width: 100%;
209      min-height: 91vh;
210      transition: all 0.3s;
211  }
212  
213  /* ---------------------------------------------------
214      MEDIAQUERIES
215  ----------------------------------------------------- */
216  @media (max-width: 768px) {
217      #sidebar {
218          min-width: 80px;
219          max-width: 80px;
220          text-align: center;
221          margin-right: -80px !important;
222      }
223  
224      .dropdown-toggle::after {
225          top: auto;
226          bottom: 10px;
227          left: 50%;
228          -webkit-transform: translateX(50%);
229          -ms-transform: translateX(50%);
230          transform: translateX(50%);
231      }
232  
233      #sidebar.active {
234          margin-right: 0 !important;
235      }
236  
237      #sidebar .sidebar-header h3,
238      #sidebar .CTAs {
239          display: none;
240      }
241  
242      #sidebar .sidebar-header strong {
243          display: block;
244      }
245  
246      #sidebar ul li a {
247          padding: 20px 10px;
248      }
249  
250          #sidebar ul li a span {
251              font-size: 0.85em;
252          }
253  
254          #sidebar ul li a i {
255              margin-left: 0;
256              display: block;
257          }
258  
259      #sidebar ul ul a {
260          padding: 10px !important;
261      }
262  
263      #sidebar ul li a i {
264          font-size: 1.3em;
265      }
266  
267      #sidebar {
268          margin-right: 0;
269      }
270  
271      #sidebarCollapse span {
272          display: none;
273      }
274  }

Что я уже пробовал:

код jquery:

$(document).ready(function () {
    $('#sidebarCollapse').on('click', function () {
        $('#sidebar').toggleClass('active');
    });
});

---