<body>
        <h1>Welcome to our website</h1>
        <p>This is our really pretty website..</p>
        <input onclick="myFunction()" type="checkbox" name="checkbox" class="switch">
        <script src="js/external.js"></script>

body {
padding: 25px;
background-color: white;
color: black;
font-size: 25px;
}

.dark-mode {
background-color: black;
color: white;
}

.switch {
position: absolute;
-webkit-appearance: none;
box-shadow: inset 5px 4px 5px rgba(8, 8, 8, 0.7);
width: 8rem;
height: 3rem; 
border-radius: 25rem;
outline: none;
background-color: #ffffff;
}

.switch:after{
content: '';
width: 46px;
height:46px;
border-radius: 50%;
background-color:   rgb(83, 83, 83);
position: absolute;
left: 2px;
top: 2px;
transform: translateX(0px);
animation: off .7s forwards cubic-bezier(.8, .5, .2, 1.4);
box-shadow: inset 5px -5px 4px rgba(53, 53, 53, 0.3);
}

@keyframes off{
0%{
    transform: translateX(80px);
    width: 46px;
}
50%{
    width: 75px;  
    border-radius: 25px;   
}
100%{
    transform: translateX(0px); 
    width: 46px;
}
}



.switch:checked:after{
animation: on .7s forwards cubic-bezier(.8, .5, .2, 1.4);
box-shadow: inset 5px 5px 4px rgb(212, 211, 211);
}

@keyframes on{
0%{
    transform: translateX(0px);
    width: 46px;
}
50%{
    width: 75px;  
    border-radius: 25px;   
}
100%{
    transform: translateX(80px); 
    width: 46px;
}
}


.switch:checked:before{
content: '';
width: 15px;
height: 15px;
border-radius: 50%;
position: absolute;
left: 15px;
top: 5px;
transform-origin: 53px 10px;
background-color: transparent;
box-shadow: 5px -1px 0px rgb(63, 62, 62);
filter: blur(0px);
animation: sun .7s forwards ease;
}
@keyframes sun{
0%{
    transform: rotate(170deg);
    background-color: transparent;
    box-shadow: 5px -1px 0px rgb(95, 93, 93);
    filter: blur(0px);
}
50%{
    background-color: transparent;
    box-shadow: 5px -1px 0px rgb(102, 101, 101);
    filter: blur(0px);
}
90%{
    background-color: #e7bc70;
    box-shadow: 0px 0px 10px #e7bc70,
    0px 0px 20px #e7bc70,
    0px 0px 30px #e7bc70,
        inset 0px 0px 2px #e7bc70;
        filter: blur(1px);
}
100%{
    transform: rotate(0deg);
    background-color: #e7bc70;
    box-shadow: 0px 0px 10px #e7bc70,
    0px 0px 20px #e7bc70,
    0px 0px 30px #e7bc70,
        inset 0px 0px 2px #e7bc70;
        filter: blur(1px);
}
}

.switch:before{
content: '';
width: 15px;
height: 15px;
border-radius: 50%;
position: absolute;
left: 15px;
top: 5px;
filter: blur(1px);
background-color: #f5daaa;
box-shadow: 0px 0px 10px #f5deb4,
0px 0px 20px #f5deb4,
0px 0px 30px #f5deb4,
    inset 0px 0px 2px #efd3a3;
    transform-origin: 53px 10px;
    animation: moon .7s forwards ease;
}
@keyframes moon{
0%{
    transform: rotate(0deg);
    filter: blur(1px);
}
50%{
    filter: blur(1px);
}
90%{
    background-color: transparent;
    box-shadow: 5px -1px 0px rgb(39, 38, 38);
    filter: blur(0px);

}
100%{
    transform: rotate(170deg);
    background-color: transparent;
    box-shadow: 5px -1px 0px rgb(39, 38, 38);
    filter: blur(0px);
}
}
function myFunction() {
    var element = document.body;
    element.classList.toggle("dark-mode");
  }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.