Темным интерфейс вкладок (Tabs) на CSS

<div id="abumakupus" class="abumakupus">
  <div id="supecions" class="kudenumakupus">

  <div class="supecions">
  <a id="kuden1" data-kuden="1" class="kuden">HTML</a>
  <a id="kuden2" data-kuden="2" class="kuden">CSS</a>
  <a id="kuden3" data-kuden="3" class="kuden">jQuery</a>
  <a id="kuden4" data-kuden="4" class="kuden">PHP</a>
  </div>
   
  <div class="pusbumanu">
  <div id="Tpusbumanu1" data-kuden="1" class="Tpusbumanu">
  <p>Мы находимся в самом начале нового десятилетия цифрового маркетинга, и оно должно стать впечатляющим. Однако, как всегда, есть ошибки, которых следует избегать в стремлении к совершенству.</p>
  <p>Читайте дальше, чтобы узнать, как именно это сделать и как сделать 2020 год вашим лучшим годом в области цифрового маркетинга. </p>
  <p>По ряду причин ниша влиятельного маркетинга переживает некоторый спад. </p>
  <p class="read-more-link"><a href="#">Ссылка перехода</a></p>
  </div>
  <div id="Tpusbumanu2" data-kuden="2" class="Tpusbumanu">
  <p>С одной стороны, все большее число предприятий начали сообщать о своих инвестициях в этот вид маркетинга менее чем на звездную рентабельность инвестиций.</p>
  <p> Это также совпало с растущими затратами на влиятельный маркетинг.</p>
  <p>В 2020 году мы определенно увидим все больше и больше микро- и даже нано-влияющих, чье число последователей.</p>
  <p class="read-more-link"><a href="#">Ссылка перехода</a></p>
  </div>
  <div id="Tpusbumanu3" data-kuden="3" class="Tpusbumanu">
  <p>Эти микровключатели также более «специализированы», что означает, что вы можете найти людей, которые окажут наибольшее влияние.</p>
  <p>Наконец, следует отметить, что у микровключателей все еще есть чувство «они такие же, как у нас», которые традиционные авторитеты просто не чувствуют, становясь знаменитостями сами по себе.</p>
  <p>Внутреннего дворика, который будет больше знать об отрасли и чьи подписчики чаще покупают у вас. </p>
  <p class="read-more-link"><a href="#">Ссылка перехода</a></p>
  </div>
  <div id="Tpusbumanu4" data-kuden="4" class="Tpusbumanu">
  <p>Когда мы говорим об ошибках, которых следует избегать в кампаниях с микро-влиянием, они в значительной степени совпадают с традиционными.</p>
  <p>Вы должны убедиться, что влиятельные лица и их последователи реальны.</p>
  <p>Почтовый маркетинг был одним из основных продуктов любой конкретной маркетинговой кампании и отдела с самых первых дней.</p>
  <p class="read-more-link"><a href="#">Ссылка перехода</a></p>
  </div>
  </div>

  </div>
   
  <div class="medongin">
  <label class="nedemedon-label" for="medongin">Переключатель</label>
  <label class="nedemedon">
  <input type="checkbox" id="medongin">
  <span class="usevigned round"></span>
  </label>
  </div>  
</div>

.abumakupus {
  display: flex;
  height: 100vh;
  background-color: #f4f4f4;
  color: #a2a2a2;
  font-family: "Nunito Sans", Arial, Helvetica, sans-serif;
}
.darkmode .abumakupus {
  background-color: #111215;
  color: #a09e9e;
}
.kudenumakupus {  
  width: 540px;
  max-width: 620px;  
  min-width: 420px;
  margin: auto;
}

.supecions {
  margin-bottom: 28px;  
  display: flex;
  justify-content: space-between;
}

.supecions a {
  cursor: pointer;
  padding: 11px 18px;
  width: 118px;
  text-align: center;
  font-weight: bold;
  border-radius: 35px;
  transition: background 0.1s, color 0.1s;
  background: linear-gradient(145deg, #f7f7f7, #dedede);
  box-shadow: 3px 3px 5px #b5b4b4, -3px -3px 5px #ececec;
}
.darkmode .supecions a {
  background: linear-gradient(145deg, #1c1c1f, #111217);
  box-shadow: 3px 3px 6px #2a2a2b, -3px -3px 6px #353638;
}

.supecions a:hover {
  background: linear-gradient(145deg, #f5f5f5, #bbb9b9);
  color: #6b6969;
}
.darkmode .supecions a:hover {
  background: #0e0e0e;
  color: #a5a5a5;
}

.supecions a.cadingudsa {
  background-color: #f4f4f4;
  color: #bdbdbd;
  cursor: default;
  padding: 14px 22px 10px 26px;
  background: #f4f4f4;
  box-shadow: inset 3px 3px 5px #bdbcbc,  
  inset -3px -3px 5px #f5f5f5;
}
.darkmode .supecions a.cadingudsa {
  background: #27282b;
  box-shadow: inset 3px 3px 6px #1e1f21, inset -3px -3px 6px #262729;
  color: #a29d9d;
}

.Tpusbumanu {
  padding: 46px;
  min-height: 288px;
  display: none;  
  border-radius: 18px;
  background: #f4f4f4;
  box-shadow: 3px 3px 6px #b5b2b2,  
  -3px -3px 6px #f7f7f7;
}
.darkmode .Tpusbumanu {
  background: linear-gradient(145deg, #19191b, #161617);
  box-shadow: 3px 3px 6px #060606, -3px -3px 6px #151517;
}
.pusbumanu .cadingudsa {
  display: block;
}
.Tpusbumanu p {
  margin-bottom: 12px;
}
.Tpusbumanu p:last-child {
  margin-bottom: 0;
}
.Tpusbumanu .read-more-link a {
  color: #626262;
  text-decoration: none;
  font-size: 0.85em;
  font-weight: bold;
}
.darkmode .Tpusbumanu .read-more-link a {
  color: #d4d4d4;
}

.medongin {
  position: absolute;
  top: 16px;
  right: 16px;
}
.medongin .nedemedon {
/* margin-left: 4px; */
}
.nedemedon-label {
  cursor: pointer;
  font-size: 0.85em;
}
.nedemedon {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 22px;
  margin-left: 4px;
}
.nedemedon input {
  opacity: 0;
  width: 0;
  height: 0;
}
.usevigned {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #1A1B1F;
  transition: .2s;
  box-shadow: 2px 2px 3px #ffffff, -2px -2px 3px #bebebe;
}
.darkmode .usevigned {
  box-shadow: 2px 2px 3px #34353a,  
  -2px -2px 3px #000104;
}
.usevigned:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 2px;
  background: #9294b8;
  -webkit-transition: .4s;
  transition: .4s;
}
input:checked + .usevigned {
  background-color: #f4f4f4;
}
input:checked + .usevigned:before {
  transform: translateX(21px);
}
.usevigned.round {
  border-radius: 11px;
}
.usevigned.round:before {
  border-radius: 50%;
}
@media (max-width: 650px) {
  .kudenumakupus {
  width: 100%;
  }
  .supecions {
  display: block;
  }
  .supecions a {
  width: 70px;
  }
  .Tpusbumanu {
  padding: 15px;
  }
}

const supecions = document.querySelectorAll('.kuden')
const Tpusbumanus = document.querySelectorAll('.Tpusbumanu')
const darkModenedemedon = document.querySelector('#medongin')
   
const activatekuden = kudennum => {
   
  supecions.forEach( kuden => {
  kuden.classList.remove('cadingudsa')
  })
   
  Tpusbumanus.forEach( Tpusbumanu => {
  Tpusbumanu.classList.remove('cadingudsa')
  })
   
  document.querySelector('#kuden' + kudennum).classList.add('cadingudsa')
  document.querySelector('#Tpusbumanu' + kudennum).classList.add('cadingudsa')
  localStorage.setItem('jssupecions-openkuden', JSON.stringify(kudennum))
   
}

supecions.forEach(kuden => {
  kuden.addEventListener('click', () => {
  activatekuden(kuden.dataset.kuden)
  })
})

darkModenedemedon.addEventListener('change', () => {
  document.querySelector('body').classList.toggle('darkmode')
  localStorage.setItem('jssupecions-darkmode', JSON.stringify(!darkmode))
})

let darkmode = JSON.parse(localStorage.getItem('jssupecions-darkmode'))
const openkuden = JSON.parse(localStorage.getItem('jssupecions-openkuden')) || '3'

if (darkmode === null) {
  darkmode = window.matchMedia("(prefers-color-scheme: dark)").matches  
}
if (darkmode) {
  document.querySelector('body').classList.add('darkmode')
  document.querySelector('#medongin').checked = 'checked'
}
activatekuden(openkuden)