Toggle Dark Mode and Light Mode Automatically or Manually

header.blade.php

<div class="absolute top-0 left-0">
    <div class="p-5" id="theme-toggler">
        <i class="mdi mdi-lightbulb-on-outline mdi-24px"></i>
    </div>   
</div>

theme-toggler.js

document.addEventListener("DOMContentLoaded", function(event) { 
    function toggleDarkMode() {
        if(document.querySelector('html').classList.contains("dark"))
            enableDarkMode(false)
        else
            enableDarkMode(true)
    }
    
    function enableDarkMode(status = true) {
        if(status)
            document.querySelector('html').classList.add('dark')
        else
            document.querySelector('html').classList.remove('dark')
    }

    // auto themer
    function autoThemer() {
        var nightTimes = [7,18]; // between 7am and 6pm
        var currentHour = new Date().getHours();
        if(currentHour <= nightTimes[0] || currentHour >= nightTimes[1]) {
            // enable dark mode
            enableDarkMode();
        }
    }

    autoThemer();

    document.getElementById('theme-toggler').addEventListener('click', function() { 
        toggleDarkMode();
    }, false);

});