Supporting system preference and manual selection | Tailwind Darkmode

Question

I am trying to adapt this code to call both a dark mode toggle and respecting system preference when the toggle is not used. Anyone with an idea how to do it? Currently, it does not respect system preference.

 <script>
// Toogle dark-light mode
 
var themeToggleDarkIcon = document.getElementById('moon');
var themeToggleLightIcon = document.getElementById('sun');
 
// Change the icons inside the button based on previous settings
if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    themeToggleLightIcon.classList.remove('hidden');
} else {
    themeToggleDarkIcon.classList.remove('hidden');
    document.documentElement.classList.remove('dark');
}
 
var themeToggleBtn = document.getElementById('theme-toggle');
 
themeToggleBtn.addEventListener('click', function() {
 
    // toggle icons inside button
    themeToggleDarkIcon.classList.toggle('hidden');
    themeToggleLightIcon.classList.toggle('hidden');
 
    // if set via local storage previously
    if (localStorage.getItem('color-theme')) {
        if (localStorage.getItem('color-theme') === 'light') {
            document.documentElement.classList.add('dark');
            localStorage.setItem('color-theme', 'dark');
        } else {
            document.documentElement.classList.remove('dark');
            localStorage.setItem('color-theme', 'light');
        }
 
    // if NOT set via local storage previously
    } else {
        if (document.documentElement.classList.contains('dark')) {
            document.documentElement.classList.remove('dark');
            localStorage.setItem('color-theme', 'light');
        } else {
            document.documentElement.classList.add('dark');
            localStorage.setItem('color-theme', 'dark');
        }
    }
 
});
  </script>

Button https://pastebin.com/9a3tTv7t

Answer 1

The code does work as is. Just needed to refresh the page after changing browser theme.