darkmode.css

.toggle {
    cursor: pointer;
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 60px;
    height: 30px;
    border:2px solid white;
    /* Further adjusted width to make the toggle box smaller */
    border-radius: 25px;
    /* Adjusted for smaller height */
    transition: .2s;
}

.toggle i {
    width: 50%;
    line-height: 30px;
    /* Adjusted to match smaller height */
    text-align: center;
    font-size: 16px;
    /* Adjusted font size for smaller icons */
    z-index: 1;
}

.toggle .ball {
    position: absolute;
    width: 25px;
    /* Adjusted ball size */
    height: 25px;
    /* Adjusted ball size */
    margin: 2.5px;
    /* Adjusted margin to center the ball */
    border-radius: 50%;
    transition: .3s ease-out;
}

input {
    display: none;
}

/* -- Light Mode -- */

.light {
    background: #fafafa;
}

.light .toggle {
    background: linear-gradient(145deg, #e1e1e1, #fff);
    box-shadow: 3px 3px 4px #e6e6e6,
        -3px -3px 4px #ffffff;
}

.light .toggle .bxs-sun {
    color: #fafafa;
}

.light .toggle .bx-moon {
    color: #198754;
}

.light .toggle .ball {
    background: #198754;
}
/* -- Dark Mode -- */
.dark {
    background: #151d2a;
}

.dark .toggle {
    background: #151d2a;
    box-shadow: 3px 3px 3px #0e131b,
        -3px -3px 3px #1c2739;
}

.dark .toggle .bx-sun {
    color: #fafafa;
}

.dark .toggle .bxs-moon {
    color: #151d2a;
}

.dark .toggle .ball {
    background: #fafafa;
    transform: translateX(30px);
    /* Adjusted for smaller toggle width */
}