@media (prefers-color-scheme: dark) {
    body:not(.light) {
        background-color: #fdfdfd;
        color: black;
    }
    body:not(.light) #logo{
        filter: invert(0);
    }
    body:not(.light) .option-window {
        background-color: #fdfdfd;
        color: black;
    }

    body.light .select{
        background-color: #d3d3d3;
    }
    body.light select{
        color: black;
    }
    body.light .slider {
        background: #313131;
    }
    
    body.light .slider::-webkit-slider-thumb {
        background: black;
    }
    
    body.light .slider::-moz-range-thumb {
        background: black;
    }

    body.light .cm-toggle:before {
        background: rgb(56, 56, 56);
    }
    body.light .cm-toggle:checked:after {
        background: #a3a3a3;
    }

    body.light #info table{
        color: black;
    }
}

body.dark {
    background-color: #1f1f1f;
    color: white;
}

body.dark #logo {
    filter: invert(90%);
}

body.dark .option-window {
    background-color: #1f1f1f !important;
    color: white !important;
}

body.dark .select{
    background-color: #4b4b4b;
}
body.dark select{
    color: white;
}
body.dark .select option{
    background-color: #4b4b4b;
}
body.dark .slider {
    background: #d3d3d3;
}

body.dark .slider::-webkit-slider-thumb {
    background: white;
}

body.dark .slider::-moz-range-thumb {
    background: white;
}

body.dark .cm-toggle:before {
    background: white;
}

body.dark .cm-toggle:checked:after {
	background: #c9c9c9;
}