States (and cleaner code) with PostCSS custom selectors

color-scheme.css

@custom-selector :--dark-mode input#dark-mode:checked;
@custom-selector :--light-mode input#light-mode:checked;

$color-scheme-toggle-root: .color-scheme;

input[name="color-scheme"] {
  display: none;
}

$color-scheme-toggle-root {
  position: absolute;
  top: var(--vertical-gutter);
  right: var(--horizontal-gutter);
  font-size: 2.5rem;
  line-height: 5.5rem;
  width: 3rem;
  text-align: center;
  user-select: none;

  &:hover {
    opacity: 0.8;
    cursor: pointer;
  }

  @media only screen and (min-device-width: 768px) {
    font-size: 3rem;
    width: 3.5rem;
    line-height: 5.9rem;
  }
}

:--light-mode {
  & ~ label {
    color: var(--primary-color);
    background-color: var(--primary-background-color);
  }

  & ~ .page {
    color: var(--primary-color);
    background-color: var(--primary-background-color);
  }

  & ~ $(color-scheme-toggle-root)--light {
    display: none;
  }
}

:--dark-mode {
  & ~ label {
    background-color: var(--primary-color);
    color: var(--primary-background-color);
    -webkit-font-smoothing: antialiased;
  }

  & ~ .page {
    background-color: var(--primary-color);
    color: var(--primary-background-color);
    --secondary-color: #afafaf;
    -webkit-font-smoothing: antialiased;
    --selection-color: #4682b4;
  }

  & ~ $(color-scheme-toggle-root)--dark {
    display: none;
  }
}