Hi,
1st Step
PHPMaker -> Under the HTML -> Theme tab, search "enable-dark-mode", generate all scripts again.
2nd Step
add all codes global > Startup Script
// for add toggle on Navbar
$( "#ew-navbar-end" ).prepend( "<li class='nav-item d-none d-sm-block'><div class='nav-link form-check custom-control form-switch'><input class='form-check-input' type='checkbox' role='switch' id='flexSwitchCheckDefault'><label class='form-check-label' for='flexSwitchCheckDefault'>Dark Theme</label></div></li>" );
//for add toggle on Sidebar Menu
$( ".nav-sidebar" ).append( "<li style='padding-left: 3.5em;' class='nav-item d-block d-sm-none'><div class='nav-link form-check custom-control form-switch'><input class='form-check-input' type='checkbox' role='switch' id='flexSwitchCheckDefault'><label class='form-check-label' for='flexSwitchCheckDefault'>Dark Theme</label></div></li>" );
//check for localStorage, add as browser preference if missing
if (!localStorage.getItem("mode")) {
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
localStorage.setItem("mode", "dark-theme");
} else {
localStorage.setItem("mode", "light-theme");
}
}
//set interface to match localStorage
if (localStorage.getItem("mode") == "dark-theme") {
$("body").addClass("dark-mode");
$("body").removeClass("light-mode");
document.getElementById("flexSwitchCheckDefault").checked = true;
} else {
$("body").removeClass("dark-mode");
$("body").addClass("light-mode");
document.getElementById("flexSwitchCheckDefault").checked = false;
}
//toggle function
$("#flexSwitchCheckDefault").click(function() {
if ($("body").hasClass("dark-mode")) {
$("body").removeClass("dark-mode");
$("body").addClass("light-mode");
localStorage.setItem("mode", "light-theme");
} else {
$("body").addClass("dark-mode");
$("body").removeClass("light-mode");
localStorage.setItem("mode", "dark-theme");
}
});