High Contrast Dark Mode Toggle
Ultra high-contrast dark/light mode toggle with smooth animation
Code
.contrast-toggle-container {
width: 80px;
height: 40px;
position: relative;
display: inline-block;
}
.contrast-toggle-input {
opacity: 0;
width: 0;
height: 0;
}
.contrast-toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #111111;
transition: .4s;
border-radius: 40px;
border: 2px solid #ffffff;
}
.contrast-toggle-slider:before {
position: absolute;
content: "";
height: 28px;
width: 28px;
left: 4px;
bottom: 4px;
background-color: #ffffff;
transition: .4s;
border-radius: 50%;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}
.contrast-toggle-input:checked + .contrast-toggle-slider {
background-color: #ffffff;
border: 2px solid #111111;
}
.contrast-toggle-input:checked + .contrast-toggle-slider:before {
transform: translateX(40px);
background-color: #111111;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}
.contrast-toggle-slider .sun {
position: absolute;
top: 50%;
left: 8px;
transform: translateY(-50%);
color: #ffffff;
font-size: 18px;
}
.contrast-toggle-slider .moon {
position: absolute;
top: 50%;
right: 8px;
transform: translateY(-50%);
color: #111111;
font-size: 18px;
opacity: 0;
transition: opacity 0.4s;
}
.contrast-toggle-input:checked + .contrast-toggle-slider .sun { opacity: 0; }
.contrast-toggle-input:checked + .contrast-toggle-slider .moon { opacity: 1; }HTML
<"attr-name"</span>>class</span>="tag"</span>>label</span> "attr-name"</span>>class</span>="contrast-toggle-container"</span>>
<"attr-name"</span>>class</span>="tag"</span>>input</span> "attr-name"</span>>type</span>="checkbox"</span> "attr-name"</span>>class</span>="contrast-toggle-input"</span>>
<"attr-name"</span>>class</span>="tag"</span>>span</span> "attr-name"</span>>class</span>="contrast-toggle-slider"</span>>
<"attr-name"</span>>class</span>="tag"</span>>span</span> "attr-name"</span>>class</span>="sun"</span>>☀</"attr-name"</span>>class</span>="tag"</span>>span</span>>
<"attr-name"</span>>class</span>="tag"</span>>span</span> "attr-name"</span>>class</span>="moon"</span>>🌙</"attr-name"</span>>class</span>="tag"</span>>span</span>>
</"attr-name"</span>>class</span>="tag"</span>>span</span>>
</"attr-name"</span>>class</span>="tag"</span>>label</span>>