<h1>๐๐</h1>
<input type="checkbox" id="switch">
<label for="switch"></label>
<section class="dark-mode"></section>
body {
/* The background here is important since it's the color we'll be changing with the mix-blend-mode */
background: #39315a;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
font-family: system-ui, sans-serif;
}
/* Styles for the emojis */
h1 {
font-size: 4rem;
margin-bottom: 1rem;
display: block;
/* Add z-index to show them on top of the dark mode overlay and prevent the color change */
z-index: 1;
}
/* Styles for the checkbox */
input[type=checkbox] {
/* This ensures that the input and label will be placed on top of the overlay so they can be clicked */
z-index: 1;
/* Remove default styles and style the checkbox */
-webkit-appearance: none;
width: 5rem;
height: 1.6rem;
border: 1px solid rgba(160,160,160,1);
border-radius: 1rem;
position: relative;
}
/* Styles for the switch */
input[type="checkbox"]::after {
position: absolute;
top: 0;
left: 0;
content: "";
width: 50%;
height: 100%;
background: #514878;
border-top-left-radius: 1rem;
border-bottom-left-radius: 1rem;
content: 'OFF';
display: flex;
align-items: center;
justify-content: center;
color: white;
}
/* Styles for the label */
label::before {
display: block;
color: white;
/* We place the text here so we can change it when the checbkox is clicked */
content: 'Turn on the light';
margin-top: 1rem;
font-size: 2rem;
font-weight: 100;
}
/* This is the dark mode overlay we'll toggle when the checkbox is checked */
.dark-mode {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
transition: all .3s ease-in-out;
/* We hide this overlay by default, since we'll be enabling it by clicking on the checkbox*/
opacity: 0;
/* These are the two lines that generate the dark mode effect */
background: white;
mix-blend-mode: difference;
}
/* This line toggles the dark mode overlay when the checkbox is checked */
input[type=checkbox]:checked ~ .dark-mode {
opacity: 1;
}
/* Move the switch when the checkbox is checked and change the color */
input[type="checkbox"]:checked::after {
right: 0;
left: auto;
background: #52cf71;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 1rem;
border-bottom-right-radius: 1rem;
content: 'ON';
}
/* We change the text and the color of the label when the dark mode overlay is enabled */
input[type=checkbox]:checked ~ label:before {
content: "Turn off the light";
}
// Nothing to see here! ๐
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.