Darkmode toggle
This is an old post from 2020. I'm keeping it here for archival purposes.
Created a little darkmode toggle button with pure CSS.
Code:
<style>
#darkmode-switch {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#darkmode-switch input {
display: none;
}
#darkmode-switch label {
position: relative;
display: block;
width: 70px;
height: 35px;
border-radius: 45px;
background: rgb(76, 170, 233);
transition: background-color 0.5s;
}
#darkmode-switch label .cloud {
position: absolute;
display: block;
border-radius: 5px;
background: rgb(176, 215, 241);
transition: all 0.4s cubic-bezier(0.7, -0.5, 0.25, 1.5);
}
#darkmode-switch label .cloud:nth-child(1) {
top: 11px;
right: 12px;
height: 6px;
width: 14px;
}
#darkmode-switch label .cloud:nth-child(2) {
top: 18px;
right: 18px;
width: 6px;
height: 3px;
}
#darkmode-switch input:checked ~ label {
background-color: rgb(23, 76, 109);
}
#darkmode-switch input:checked ~ label .cloud {
transform: translateX(-27px);
width: 3px;
height: 3px;
background: rgb(104, 144, 168);
}
#darkmode-switch label::after {
box-sizing: border-box;
content: '';
display: block;
position: absolute;
width: 25px;
height: 25px;
margin: 5px;
left: 0;
top: 0;
border-radius: 20px;
background: rgb(235, 201, 108);
transition: all 0.4s cubic-bezier(0.7, -0.5, 0.25, 1.5);
}
#darkmode-switch input:checked ~ label::after {
left: 35px;
box-shadow: 10px 6px 0 0 rgb(235, 201, 108);
transform: translate(-10px, -6px);
background: transparent;
}
</style>
<div id="darkmode-switch">
<input type="checkbox" id="darkmode-switch-radio" />
<label for="darkmode-switch-radio">
<span class="cloud"></span>
<span class="cloud"></span>
</label>
</div>