Creating system mode mode (dark mode)

I am going to design a dark mode for my wordpress theme.

I have no problem designing dark mode and light mode and I have easily designed these two.
But I’m looking to create a third mode which is the default for pages.

The third mode I want to create is the automatic use of dark mode or light mode using the user’s default settings for their browser or system.

Something similar to the site (stackoverflow.com) that I have placed in the image below:

enter image description here

I don’t know where to start to create such a state and all the code I wrote is as follows:

let bodyMode = document.querySelector("#pageMode");
let SystemMode = document.querySelector(".SystemMode");
let DarkMode = document.querySelector(".DarkMode");
let LightMode = document.querySelector(".LightMode");

SystemMode.addEventListener("click", function () {

//I don't have any idea to create mod system mode

});

DarkMode.addEventListener("click", function () {
    $(bodyMode).addClass("bodyDark");
    $(bodyMode).removeClass("bodyHalfLit");
});

LightMode.addEventListener("click", function () {
    $(bodyMode).removeClass("bodyDark");
    $(bodyMode).removeClass("bodyHalfLit");
});
#pageMode {
  background: #eee;
}

.bodyDark {
  background: #000 !important;
}

.bodyHalfLit {
  background: #909090 !important;
}

.main-selectMode {
  position: absolute;
  top: 20%;
  left: 2%;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<body id="pageMode">

    <div class="dropdown main-selectMode">
        <a class="btn btn-secondary dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
            aria-expanded="false">
            page Mode
        </a>

        <ul class="dropdown-menu">
            <li class="SystemMode"><a class="dropdown-item">System Mode</a></li>
            <li class="LightMode"><a class="dropdown-item">Light Mode</a></li>
            <li class="DarkMode"><a class="dropdown-item">Dark Mode</a></li>
        </ul>
    </div>


</body>