Theme Switch by admin

9 Add to Favorites

HTML Code
CSS Code

* {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:root {
  --hue: 223;
  --trans-dur: 0.4s;
  --trans-timing: cubic-bezier(0.65,0,0.35,1);
  font-size: calc(40px + (80 - 40) * (100vw - 320px) / (2560 - 320));
}
body,
input {
  color: hsl(var(--hue),10%,10%);
  font: 1em/1.5 sans-serif;
}
body {
  background-color: hsl(var(--hue),10%,90%);
  display: flex;
  height: 100vh;
  transition:
    background-color var(--trans-dur),
    color var(--trans-dur);
}
.switch,
.switch__input {
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.switch {
  margin: auto;
}
.switch__input,
.switch__input:before {
  background-color: hsl(var(--hue),10%,10%);
}
.switch__input {
  border-radius: 0.75em;
  cursor: pointer;
  display: block;
  width: 3em;
  height: 1.5em;
  transition: background-color var(--trans-dur) var(--trans-timing);
  -webkit-appearance: none;
  appearance: none;
}
.switch__input:before {
  border-radius: 50%;
  content: "";
  display: block;
  position: absolute;
  top: 0.125em;
  left: 0.125em;
  width: 1.25em;
  height: 1.25em;
  transition:
    background-color var(--trans-dur) var(--trans-timing),
    transform var(--trans-dur) var(--trans-timing);
}
.switch__icon,
.switch__icon-part {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
.switch__icon {
  background-color: hsl(var(--hue),10%,90%);
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  top: 0.125em;
  left: 0.125em;
  width: 1.25em;
  height: 1.25em;
  transition: transform var(--trans-dur) var(--trans-timing);
}
.switch__icon-part {
  transition:
    box-shadow var(--trans-dur) var(--trans-timing),
    transform var(--trans-dur) var(--trans-timing);
}
.switch__icon-part--1,
.switch__icon-part--2,
.switch__icon-part--3 {
  border-radius: 50%;
}
.switch__icon-part--1 {
  background-color: hsl(var(--hue),10%,90%);
  top: calc(50% - 0.375em);
  left: calc(50% - 0.375em);
  width: 0.75em;
  height: 0.75em;
}
.switch__icon-part--2 {
  background-color: hsl(var(--hue),10%,10%);
  top: calc(50% - 0.4375em);
  left: calc(50% - 0.0625em);
  width: 0.5em;
  height: 0.5em;
  transform: translate(-0.1875em,0.1875em) scale(0.2);
}
.switch__icon-part--3 {
  box-shadow: 0 0 0 0.625em hsl(var(--hue),10%,10%) inset;
  width: 1.25em;
  height: 1.25em;
  transform: scale(0.25);
}
.switch__icon-part--3 ~ .switch__icon-part {
  background-color: hsl(var(--hue),10%,10%);
  border-radius: 0.0625em;
  top: 50%;
  left: 50%;
  width: 0.125em;
  height: 0.1875em;
  transform-origin: 50% 0;
}
.switch__icon-part--4 {
  transform: translateX(-50%) rotate(0) translateY(0.25em);
}
.switch__icon-part--5 {
  transform: translateX(-50%) rotate(45deg) translateY(0.25em);
}
.switch__icon-part--6 {
  transform: translateX(-50%) rotate(90deg) translateY(0.25em);
}
.switch__icon-part--7 {
  transform: translateX(-50%) rotate(135deg) translateY(0.25em);
}
.switch__icon-part--8 {
  transform: translateX(-50%) rotate(180deg) translateY(0.25em);
}
.switch__icon-part--9 {
  transform: translateX(-50%) rotate(225deg) translateY(0.25em);
}
.switch__icon-part--10 {
  transform: translateX(-50%) rotate(270deg) translateY(0.25em);
}
.switch__icon-part--11 {
  transform: translateX(-50%) rotate(315deg) translateY(0.25em);
}
.switch__sr {
  overflow: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
}

/* `:checked` state */
.switch__input:checked {
  background-color: hsl(var(--hue),10%,90%);
}
.switch__input:checked:before,
.switch__input:checked ~ .switch__icon {
  transform: translateX(1.5em);
}
.switch__input:checked ~ .switch__icon .switch__icon-part--2 {
  transform: translate(0,0) scale(1);
}
.switch__input:checked ~ .switch__icon .switch__icon-part--3 {
  box-shadow: 0 0 0 0.25em hsl(var(--hue),10%,10%) inset;
  transform: scale(1);
}
.switch__input:checked ~ .switch__icon .switch__icon-part--4 {
  transform: translateX(-50%) rotate(0) translateY(0.625em) scale(0);
}
.switch__input:checked ~ .switch__icon .switch__icon-part--5 {
  transform: translateX(-50%) rotate(45deg) translateY(0.625em) scale(0);
}
.switch__input:checked ~ .switch__icon .switch__icon-part--6 {
  transform: translateX(-50%) rotate(90deg) translateY(0.625em) scale(0);
}
.switch__input:checked ~ .switch__icon .switch__icon-part--7 {
  transform: translateX(-50%) rotate(135deg) translateY(0.625em) scale(0);
}
.switch__input:checked ~ .switch__icon .switch__icon-part--8 {
  transform: translateX(-50%) rotate(180deg) translateY(0.625em) scale(0);
}
.switch__input:checked ~ .switch__icon .switch__icon-part--9 {
  transform: translateX(-50%) rotate(225deg) translateY(0.625em) scale(0);
}
.switch__input:checked ~ .switch__icon .switch__icon-part--10 {
  transform: translateX(-50%) rotate(270deg) translateY(0.625em) scale(0);
}
.switch__input:checked ~ .switch__icon .switch__icon-part--11 {
  transform: translateX(-50%) rotate(315deg) translateY(0.625em) scale(0);
}
body:has(.switch__input:checked) {
  background-color: hsl(var(--hue),10%,10%);
  color: hsl(var(--hue),10%,90%);
}

Uploaded 12th July 2024 Views 272 #night #day #dark #light #switch

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

CSS Properties Used

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

HTML Tags Used

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

html body label input span