body{
    background-color: cornsilk;
    color: teal;
    text-align: center;
    transition: all 0.3s;
}

.tombol{
    display: inline-block;
    cursor: pointer;
    background-color: crimson;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
}

#tombol-gelap:checked ~ body,
body:has(#tombol-gelap:checked){
    background-color: teal;
    color: cornsilk;
}