Light Dark Toggle by admin

6 Add to Favorites

HTML Code
CSS Code

body {
  margin: 0;
  min-width: 100vh;
  background: #eef5ff;
  transition: background 0.4s;
}

body:has(.light-dark:checked) {
  background: #252e48;
}

/* demo only */
label {
  font-family: Roboto, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 1.25rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 1em;
  
  &::before {
    content: "Light";
    color: #151e39;
  }
  
  &::after {
    content: "Dark";
    color: #c7cedb;
  }
}
/**/

@property --light-dark-toggle-x {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: false;
}

.light-dark {
  font-size: 1em;
  appearance: none;
  position: relative;
  aspect-ratio: 2 / 1;
  width: 4em;
  background-image: linear-gradient(#0001, #0000, #0000, #0001);
  background-color: #87b0ff;
  border-radius: 100em;
  transition: background-color 0.4s;
  
  &::before {
    --light-dark-toggle-x: 0;
    content: "";
    position: absolute;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);
    height: 60%;
    aspect-ratio: 1;
    background: #ffc;
    border-radius: 50%;
    transition: all 0.5s, --light-dark-toggle-x 0.4s;
    -webkit-mask: radial-gradient(circle at 20% var(--light-dark-toggle-x), #0000 var(--light-dark-toggle-x), #000 0);
  }
  
  &::after {
    content: "";
    position: absolute;
    width: 1em;
    aspect-ratio: 1;
    background: #fff;
    border-radius: 50%;
    left: 70%;
    top: 40%;
    transform: translate(-50%, -50%);
    clip-path: polygon(-200% 0, 300% 0, 300% 80%, -200% 80%);
    box-shadow: 
      -0.5em 0.25em 0 -0.1em #fff,
      0.5em 0.3em 0 -0.2em #fff,
      0 0 0 0 #fff,
      0 0 0 0 #fff,
      0 0 0 0 #fff,
      0 0 0 0 #fff,
      0 0 0 0 #fff,
      0 0 0 0 #fff;
    transition: 
      width 0.4s linear,
      top 0.4s linear,
      left 0.4s linear,
      clip-path 0.2s linear,
      box-shadow 0.3s cubic-bezier(.75,1.35,.75,.75)
  }
  
  &:checked {
    background-color: #131827;
    
    &::before {
      left: 75%;
      --light-dark-toggle-x: 35%;
    }
    
    &::after {
      width: 0.15em;
      left: 33%;
      top: 50%;
      clip-path: polygon(-3000% -2000%, 2000% -2000%, 2000% 300%, -3000% 300%);
      box-shadow: 
        -0.5em 0.25em 0 -0.02em #fff,
        0.5em 0.3em 0 -0.01em #fff,
        0.7em -0.285em 0 -0.01em #fff,
        0.74em -0.5em 0 -0.03em #fff,
        -0.3em -0.35em 0 -0.02em #fff,
        
        0 -0.06em 0 -0.04em #fff,
        -0.04em 0.045em 0 -0.04em #fff,
        0.05em 0.045em 0 -0.04em #fff;
    }
  }
  
  &[disabled] {
    opacity: 0.25;
  }
}

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

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

Uploaded: 12th July 2024

Tags: #light, #dark, #toggle, #night, #day

CSSPortal

( admin )

We share content found online. We don't claim credit of anything posted here. If you see your work, let us know and we can move it to your account.

•Member since: 25th June 2024

•Website•X (Twitter)

CSS Properties Used

There are 31 CSS properties used in the above example. Click to view and learn about each property.

margin min-width background transition font-family font-weight font-size position top left transform display align-items gap content color syntax initial-value inherits appearance aspect-ratio width background-image background-color border-radius height clip-path box-shadow opacity print-color-adjust animation

HTML Tags Used

There are 4 HTML Tags used in the above example. Click to view and learn about each tag.

html body label input