<div class='wrapper'>
  <div class="circle outer">
    <div class="circle inner"> 
      <button class='btn'>Toggle mode</button></div>
  </div>
 
</div>

html, body {
   background-color: white;
}
.wrapper {
  position: relative;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle {
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.outer {
  width: 350px;
  height: 350px;
  background-color: #3c249c;
}

.inner {
  width: 250px;
  height: 250px;
  background-color: #6754b0;
}

.btn {
width: 150px;
height: 150px;  
top: 50px;
background-color: #9d87f5; 
color: #170514;  
border: none;
padding: 8px 16px;
border-radius: 50%; 
font-size: 18px;
cursor: pointer; 
}

.dark-mode {
filter: invert(100%)
}

let button = document.querySelector('.btn')

button.addEventListener('click', ()=>{
  document.documentElement.classList.toggle('dark-mode')
})