theme.css

.light-dark-theme{
    display: grid;
    grid-template-columns: auto;
    justify-content: end;
    margin: 20px;
}
label{
    background-color: #111;
    height:26px;
    width: 50px;
    display: flex;
    border-radius: 50px;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
    position: relative;
    transform: scale(1.5);
}
.fa-moon{
color:#f1c40f
}
.fa-sun{
color:#f39c12
}
.ball{
    width: 22px;
    height: 22px;
    background-color: #fff;
    position: absolute;
    top: 2px;
    left: 2px;
    border-radius: 50%;
    transition: transform 0.2s linear;
}

.checkbox{
    opacity: 0;
    position: absolute;
}
.checkbox:checked + .label .ball{
transform: translateX(24px);}
body.dark{
    background-color: #2e354d;
    transition: background 0.2s linear;
}
body.dark h4{
color:rgb(231, 240, 239);
}
body.dark footer{
    color:rgb(231, 240, 239);
    }
body.dark .intro h1{
        color:rgb(231, 240, 239);
        }
body.dark .main-content-container{
background-color: #2e354d; 
color: rgb(231, 240, 239);
        }
body.dark .main-content-container p{
color:rgb(231, 240, 239); ;
}
body.dark .third-side-bar{
   background-color:#2e354d;
    }
body.dark .third-side-bar p{
    color:rgb(231, 240, 239);
    }
body.dark .icons{
color: #fff;
}

/* End of code for changing website theme */