<body data-theme="light">
    <section>
        <div class="container">
            <h1>CODEWITHRANDOM</h1>
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos
                maiores atque dolorum voluptatum laudantium id adipisci quisquam
                ea laborum sed ipsam quam aspernatur ratione architecto numquam,
                aperiam recusandae ducimus aliquid ut enim culpa quis minus!
                Autem id, recusandae incidunt maiores non saepe dolor ullam
                perspiciatis! Nulla nemo sequi vero et.
            </p>
            <button>Hello!</button>
        </div>
    </section>
    <div class="theme-switcher">
        <input type="checkbox" id="switcher" />
        <label for="switcher">switch</label>
    </div>
</body>

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body {
    font-family: "Montserrat";
    color: var(--color-4);
}
body[data-theme="light"] {
    --color-1: rgb(196, 220, 241);
    --color-2: white;
    --color-3: white;
    --color-4: rgb(80, 82, 110);
}
body[data-theme="dark"] {
    --color-1: #1e1f26;
    --color-2: #292c33;
    --color-3: rgb(39, 40, 42);
    --color-4: rgb(186, 186, 202);
}
section {
    background-color: var(--color-1);
    min-height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.container {
    width: 90%;
    margin: 0 auto;
    background-color: var(--color-2);
    border-radius: 8px;
    padding: 20px;
    max-width: 500px;
}
h1 {
    font-size: 30px;
    font-weight: 500;
    text-transform: uppercase;
}
p {
    margin-top: 10px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 25px;
}
button {
    background-color: var(--color-4);
    padding: 10px 30px;
    border: none;
    font-size: 24px;
    text-transform: uppercase;
    color: var(--color-3);
    border-radius: 4px;
    margin-top: 20px;
    cursor: pointer;
}
.theme-switcher {
    position: absolute;
    right: 30px;
    top: 10px;
}
input {
    width: 0;
    height: 0;
    display: none;
    visibility: hidden;
}
label {
    cursor: pointer;
    display: block;
    text-indent: -9999px;
    height: 30px;
    width: 60px;
    border-radius: 50px;
    background-color: rgb(255, 255, 255);
    transition: 0.5s ease background-color;
}
label::after {
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 50px;
    top: 50%;
    left: 5px;
    transform: translateY(-50%);
    background-color: rgb(46, 42, 68);
    transition: 0.5s ease;
}
input:checked + label::after {
    /* left: calc(100% - 2.5px); */
    left: calc(100% - 25px);
    background-color: aliceblue;
}
input:checked + label {
    background-color: rgb(25, 26, 37);
    border: 2px solid whitesmoke;
}

const input = document.querySelector(".theme-switcher input");
input.addEventListener("change", (e) => {
    if (e.target.checked) {
        document.body.setAttribute("data-theme", "dark");
    } else {
        document.body.setAttribute("data-theme", "light");
    }
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.