CSS code for Dark Mode Toggle in this post: https://wptips.dev/easy-dark-mode

dark-toggle.css

.dark-toggle__switch {
  --width: 44px;
  --height: 24px;
  --padding: 4px;
 
  display: block;
  overflow: hidden;
  position: relative;
  background-color: black;
  width: var(--width);
  height: var(--height);
  border: 1px solid white;
  border-radius: 1rem;
}

.dark-toggle__switch:focus {
  box-shadow: 0 0 0 2px white;
}

.dark-toggle__switch::before {
  content: "";
  position: absolute;
  z-index: 3;
  display: inline-block;
  background-color: white;
  width: calc(var(--height) - var(--padding) - var(--padding));
  height: calc(var(--height) - var(--padding) - var(--padding));
  top: 50%;
  left: var(--padding);
  border-radius: 50%;
  transform: translateY(-50%);
  transition: all 0.25s ease-in-out;
}

input:checked + .dark-toggle__switch::before {
  transform: translateY(-50%) translateX(calc(var(--width) / 2 - var(--padding) / 2));
}

.dark-toggle__switch::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 2;
  display: inline-block;
  background-color: black;
  transition: all 0.25s ease-in-out;
  transform: translateY(-50%);
  width: 1px;
  height: 1px;
  border-radius: 50%;
}

body.is-dark .dark-toggle__switch::after {
  z-index: 4;
  width: calc(var(--width) * 0.7);
  height: calc(var(--width) * 0.7);
}

dark-toggle.sass

.dark-toggle__switch
  --width: 44px
  --height: 24px
  --padding: 4px

  display: block
  overflow: hidden
  position: relative
  background-color: black
  width: var(--width)
  height: var(--height)
  border: 1px solid white
  border-radius: 1rem

  &:focus
    box-shadow: 0 0 0 2px white

  &::before
    content: ""
    position: absolute
    z-index: 3
    display: inline-block
    background-color: white

    width: calc(var(--height) - var(--padding) - var(--padding))
    height: calc(var(--height) - var(--padding) - var(--padding))
    top: 50%
    left: var(--padding)
    border-radius: 50%
    transform: translateY(-50%)
    transition: all .25s ease-in-out
  
    input:checked + &
      transform: translateY(-50%) translateX(calc(var(--width) / 2 - var(--padding) / 2))

  // turn the circle into crescent
  &::after
    content: ""
    position: absolute
    top: 50%
    left: 0
    z-index: 2

    display: inline-block
    background-color: black
    transition: all .25s ease-in-out
    transform: translateY(-50%)

    width: 1px
    height: 1px
    border-radius: 50%

    body.is-dark &
      z-index: 4
      width: calc(var(--width) * 0.7)
      height: calc(var(--width) * 0.7)