:root {
  --bg: #ffe;
  --fg: #332;
  --cb: url(sun.svg)
}

:root:has(#theme-toggle:checked) {
  --bg: #332;
  --fg: #ffe;
  --cb: url(moon.svg)

}

@media (prefers-color-scheme: dark) {
  :root:has(#theme-toggle:checked) {
    --bg: #ffe;
    --fg: #332;
  }
  
  :root {
    --bg: #332;
    --fg: #ffe;
  }
}

body {
  background-color: var(--bg);
  color: var(--fg);
  transition: 1s;

}

label[for=theme-toggle] {
  border: 2px solid currentColor;
  border-radius: 99px;
  display: inline-block;
  width: 50px;
  height: 26px;
  padding: 2px;
  
}

label[for=theme-toggle]::after {
  content: '';
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: currentColor;
  transition: 1s;
  background-image: var(--cb);
}

:checked+label[for=theme-toggle]::after {
margin-left: 24px;
}