Dark Mode checkbox state isn't saved on the first visit

I have a checkbox for dark mode (it applies the dark-mode class to the body). I've managed to make it work when the user clicks the box, now I wanted to add a code that checks the checkbox when the user's device is set to prefer dark mode. So when you have a device with dark mode, the checkbox is checked on the first visit and stays that way until you unclick it to light mode.

<input type="checkbox" class="dm-btn" id="dmtoggle" style="display:none;">
<label for="dmtoggle"></label>

$(".dm-btn").on("click", function(){
    localStorage.setItem("dm-checkbox", $(".dm-btn").prop('checked'));
    let dmState = JSON.parse(localStorage.getItem("dm-checkbox"));
    
    if (dmState){
        $("body").addClass("dark-mode");
    } else {
        $("body").removeClass("dark-mode");
    }
});

$(document).ready(function(){
    
    var visit = localStorage.getItem('visit');
    
    if (visit == null) {
        visit = 0;

        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
            localStorage.setItem("dm-checkbox", $(".dm-btn").prop('checked', true));
        } else {
            localStorage.setItem("dm-checkbox", $(".dm-btn").prop('checked', false));
        }  
    } 

    visit++
    localStorage.setItem('visit', visit);
    console.log("visit" + " " + localStorage.getItem('visit'));
    
    let dmState = JSON.parse(localStorage.getItem("dm-checkbox"));
    $(".dm-btn").prop('checked', dmState);
    
    if (dmState){
        $("body").addClass("dark-mode");
    } else {
        $("body").removeClass("dark-mode");
    } 
    
});

When I visit the website for the first time (with device set to dark mode) it checks the checkbox, but doesn't apply the dark-mode class to the body. After the page reload it unchecks the checkbox to the light mode. How can I make this work?