CSS夜间模式开关

            
            .toggle {
  /*
  <1.0 = fast
   1.0 = regular speed
  >1.0 = slow 
  */
  --speed: 0.5;
  --night: 0px;
  --circle: 0.14em;
  --pos-y-ray1: 10%;
  --pos-x-ray2: 0.65em;
  --pos-y-ray2: 0.175em;
  --pos-x-ray3: 0.725em;
  --pos-x-ray4: 0.65em;
  --pos-y-ray4: 0.62em;
  --pos-y-ray5: 90%;
  --pos-x-ray6: 0.225em;
  --pos-y-ray6: 0.62em;
  --pos-x-ray7: 0.125em;
  --pos-x-ray8: 0.225em;
  --pos-y-ray8: 0.175em;
  --width-star1: 0px;
  --width-star2: 0px;
  --width-star3: 0px;
  appearance: none;
  position: relative;
  font-size: 1em;
  width: 2em;
  aspect-ratio: 2;
  border: max(1px, 0.05em) solid;
  border-radius: 2em;
  background:
    /* sun */
    radial-gradient(circle at 0.5em 50%, #0000 var(--circle), #000 0 calc(var(--circle) + 0.045em), #0000 0),
    radial-gradient(70% 50%, #000 99%, #0000) 0.475em var(--pos-y-ray1) / 0.04em 0.15em,
    linear-gradient(-45deg, #0000 38%, #000 0 62%, #0000 0) var(--pos-x-ray2) var(--pos-y-ray2) / 0.12em 0.12em,
    radial-gradient(50% 70%, #000 99%, #0000) var(--pos-x-ray3) 50% / 0.15em 0.04em,
    linear-gradient(45deg, #0000 38%, #000 0 62%, #0000 0) var(--pos-x-ray4) var(--pos-y-ray4) / 0.12em 0.12em,
    radial-gradient(70% 50%, #000 99%, #0000) 0.475em var(--pos-y-ray5) / 0.04em 0.15em,
    linear-gradient(-45deg, #0000 38%, #000 0 62%, #0000 0) var(--pos-x-ray6) var(--pos-y-ray6) / 0.12em 0.12em,
    radial-gradient(50% 70%, #000 99%, #0000) var(--pos-x-ray7) 50% / 0.15em 0.04em,
    linear-gradient(45deg, #0000 38%, #000 0 62%, #0000 0) var(--pos-x-ray8) var(--pos-y-ray8) / 0.12em 0.12em,
    /* moon */
    radial-gradient(farthest-side circle at 40% 50%, #0000 0.3em, #fff 0 0.33em, #0000 0) 95% 50% / 0.7em 0.7em,
    radial-gradient(farthest-side circle at 29% 50%, #0000 0.19em, #fff 0 0.22em, #0000 0) 81% 50% / 0.5em 0.5em,
    radial-gradient(circle at 20% 30%, #fff var(--width-star1), #0000 0),
    radial-gradient(circle at 30% 70%, #fff var(--width-star2), #0000 0),
    radial-gradient(circle at 45% 45%, #fff var(--width-star3), #0000 0),
    /* extra */
    radial-gradient(circle at 0.5em 50%, #000 var(--night), #0000 0)
    ;
  background-repeat: no-repeat;
  transition: 
    --night calc(var(--speed) * 0.5s), 
    --circle calc(var(--speed) * 0.25s),
    --pos-y-ray1 calc(var(--speed) * 0.25s) ,
    --pos-x-ray2 calc(var(--speed) * 0.45s), --pos-y-ray2 calc(var(--speed) * 0.45s),
    --pos-x-ray3 calc(var(--speed) * 0.6s),
    --pos-x-ray4 calc(var(--speed) * 0.45s), --pos-y-ray4 calc(var(--speed) * 0.45s),
    --pos-y-ray5 calc(var(--speed) * 0.25s),
    --pos-x-ray6 calc(var(--speed) * 0.45s), --pos-y-ray6 calc(var(--speed) * 0.45s),
    --pos-x-ray7 calc(var(--speed) * 0.25s),
    --pos-x-ray8 calc(var(--speed) * 0.45s), --pos-y-ray8 calc(var(--speed) * 0.45s),
    --width-star1 calc(var(--speed) * 0.5s), 
    --width-star2 calc(var(--speed) * 0.5s), 
    --width-star3 calc(var(--speed) * 0.5s)
    ;
  transition-delay: 
    calc(var(--speed) * 0s), 
    calc(var(--speed) * 0.4s), 
    calc(var(--speed) * 0.5s), 
    calc(var(--speed) * 0.6s), 
    calc(var(--speed) * 0.6s), 
    calc(var(--speed) * 0.7s), 
    calc(var(--speed) * 0.9s), 
    calc(var(--speed) * 0.9s), 
    calc(var(--speed) * 1.2s), 
    calc(var(--speed) * 1.25s), 
    calc(var(--speed) * 1.25s), 
    calc(var(--speed) * 1.55s), 
    calc(var(--speed) * 1.65s), 
    calc(var(--speed) * 1.65s), 
    calc(var(--speed) * 0s), 
    calc(var(--speed) * 0.05s), 
    calc(var(--speed) * 0.1s);
  
  &::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 25%;
    border-radius: 50%;
    border: 0.2em solid #0000;
    transform: translate(-50%, -50%);
  }
  
  &:checked {
    --night: 2em;
    --circle: 0em;
    --pos-y-ray1: -20%;
    --pos-x-ray2: 1.15em;
    --pos-y-ray2: -0.225em;
    --pos-x-ray3: 2em;
    --pos-x-ray4: 1.15em;
    --pos-y-ray4: 1.12em;
    --pos-y-ray5: 120%;
    --pos-x-ray6: -0.275em;
    --pos-y-ray6: 1.12em;
    --pos-x-ray7: -0.25em;
    --pos-x-ray8: -0.275em;
    --pos-y-ray8: -0.225em;
    --width-star1: 0.04em;
    --width-star2: 0.04em;
    --width-star3: 0.04em;
    transition-delay: 
      calc(var(--speed) * 1.5s),
      calc(var(--speed) * 1.35s),
      calc(var(--speed) * 0.0s),
      calc(var(--speed) * 0.1s),
      calc(var(--speed) * 0.1s),
      calc(var(--speed) * 0.2s),
      calc(var(--speed) * 0.4s),
      calc(var(--speed) * 0.4s),
      calc(var(--speed) * 0.6s),
      calc(var(--speed) * 0.75s),
      calc(var(--speed) * 0.75s),
      calc(var(--speed) * 0.9s),
      calc(var(--speed) * 1.1s),
      calc(var(--speed) * 1.1s),
      calc(var(--speed) * 1.7s),
      calc(var(--speed) * 1.9s),
      calc(var(--speed) * 1.8s);
    
    &::before {
      left: 75%;
    }
  }
  
  &[disabled] {
    opacity: 0.25;
  }
}

@media print {
  .toggle {
    &, &::before, &::after {
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }
  }
}

@media (prefers-reduced-motion) {
  .toggle {
    &, &::before, &::after {
      transition: none !important;
      animation: none !important;
    }
  }
}

@property --circle { syntax: '<length>'; initial-value: 0px; inherits: false; }
@property --night { syntax: '<length>'; initial-value: 0px; inherits: false; }
@property --pos-y-ray1 { syntax: '<percentage>'; initial-value: 10%; inherits: false; }
@property --pos-x-ray2 { syntax: '<length>'; initial-value: 1px; inherits: false; }
@property --pos-y-ray2 { syntax: '<length>'; initial-value: 1px; inherits: false; }
@property --pos-x-ray3 { syntax: '<length>'; initial-value: 1px; inherits: false; }
@property --pos-x-ray4 { syntax: '<length>'; initial-value: 1px; inherits: false; }
@property --pos-y-ray4 { syntax: '<length>'; initial-value: 1px; inherits: false; }
@property --pos-y-ray5 { syntax: '<percentage>'; initial-value: 90%; inherits: false; }
@property --pos-x-ray6 { syntax: '<length>'; initial-value: 1px; inherits: false; }
@property --pos-y-ray6 { syntax: '<length>'; initial-value: 1px; inherits: false; }
@property --pos-x-ray7 { syntax: '<length>'; initial-value: 1px; inherits: false; }
@property --pos-x-ray8 { syntax: '<length>'; initial-value: 1px; inherits: false; }
@property --pos-y-ray8 { syntax: '<length>'; initial-value: 1px; inherits: false; }
@property --width-star1 { syntax: '<length>'; initial-value: 0px; inherits: false; }
@property --width-star2 { syntax: '<length>'; initial-value: 0px; inherits: false; }
@property --width-star3 { syntax: '<length>'; initial-value: 0px; inherits: false; }

/* demo only */
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0;
  min-height: 100vh;
  font-size: 12vmin;
  abackground: #123;
}