Skip to content

Instantly share code, notes, and snippets.

@hrsetyono
Last active Aug 2, 2022
Embed
What would you like to do?
CSS code for Dark Mode Toggle in this post: https://wptips.dev/easy-dark-mode
.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__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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment