What is the problem of dark mode when we want to have it on both mobile and computer?

Question

I have created a dark mode for my site, this is its code

<div class="dark-mode-toggle">
    <label class="switch">
        <input type="checkbox" id="darkModeToggle">
        <span class="slider round"></span>
    </label>
    <p class="toggle-label">DarkMode</p>
</div>

// Apply dark mode immediately based on preference, even before DOM is ready
var darkModePreference = localStorage.getItem('darkMode');
if (darkModePreference === 'true') {
    document.documentElement.classList.add('dark-mode'); // Apply dark mode directly to html element
}

document.addEventListener('DOMContentLoaded', function () {
    var darkModeToggle = document.getElementById('darkModeToggle');
    var setDarkModePreference = function (value) {
        localStorage.setItem('darkMode', value);
    };
    // Ensure toggle button state matches preference after DOM is ready
    darkModeToggle.checked = darkModePreference === 'true';
    darkModeToggle.addEventListener('change', function () {
        if (darkModeToggle.checked) {
            document.documentElement.classList.add('dark-mode');
            setDarkModePreference(true);
        } else {
            document.documentElement.classList.remove('dark-mode');
            setDarkModePreference(false);
        }
    });
});

/* Add this in your CSS file or style tag */
.dark-mode-toggle {
    display: flex;
    align-items: center;
    margin-right: 15px; /* Adjust margin as needed */
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

p.toggle-label {
    padding: 5px;
    display: none;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
    background-image: url("https://example.com/uploads/2024/dark-light/dark1.png");
    background-size: contain;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
    background-image: url("https://example.com/uploads/2024/dark-light/light1.png");
    background-size: contain;
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/* Dark mode styles */
/* header */
.dark-mode .whb-color-dark:not(.whb-with-bg) {
    background-color: #222;
}

and ETC...

But I have a problem. I have put these codes in the mobile header and in the desktop header because my site has a different header in each mode.

But my problem is that it doesn't work on mobile maybe the codes are duplicated because the load in mobile and desktop headers too.

What do you think I should do?

Because I think it is only hidden on mobile or desktop, and in both cases, both codes are fully loaded and are present on the page.

What should I do to solve the problem of dark mode not working? From a principled and correct method that has excellent performance without increasing the code volume or being repetitive?

I tried several things to solve this problem again with this methods

The first method

I put JavaScript, CSS, and HTML codes in the header of the desktop, but I only put the HTML code in the mobile. Because the desktop header codes are called in mobile mode, but they are hidden. That's why I put only HTML to show the button on mobile. The button is shown but has no function. It means that it does not work properly and changing its status does not make a change.

The second method

I put all three HTML, CSS and JavaScript codes on both desktop and mobile. But it still didn't work

The third method

We decided to create a plugin and load the styles only on the same device with the is mobile function. And we put the same styles and codes unchanged in the extension files with the names of mobile and desktop. But again it was not effective and it didn't make any difference and again it is only shown while it is placed in a header.

There is probably a repetition or interference. So it became clear that the problem was not that I was using raw codes and maybe there was no need to create a plugin/maybe it was. I do not know. But the main problem has not been found yet and it remains strong.