<svg viewBox="0 0 400 400" class="color-mode" id="colorMode">
  <circle r="195" cx="200" cy="200" fill="white" stroke="#000" stroke-width="10" />
  <path d=" M 200 375 A 175 175 0 0 1 200 25" />
  <path d=" M 200 300 A 100 100 0 0 1 200 100" fill="#FFF" />
  <path d=" M 200 100 A 100 100 180 0 1 200 300" />
</svg>

.color-mode {
  aspect-ratio: 1;
  filter: invert(var(--dark-mode));
  inline-size: 25rem;
  max-inline-size: 50vw;
  transform: rotate(calc(var(--dark-mode) * 180deg));
  transition: all .6s ease;
}

body {
  --dark-mode: 0;
  background-color: hsl(0, 0%, calc(100% * (1 - var(--dark-mode))));
  display: grid;
  min-block-size: 95vh;
  place-content: center;
  transition: all .6s ease;
}

colorMode.addEventListener('click', () => {
  const current = document.body.style.getPropertyValue("--dark-mode") - 0;
  document.body.style.setProperty("--dark-mode", 1 - current);
})