Support for darkmode_allow and darkmode-on

webv4/components/navbar.xjs

@@ -49,12 +49,12 @@
             </ul>
 
             <ul class="nav navbar-nav navbar-right">
-<?xjs if (!settings.darkmode_off) { ?>	            
+<?xjs if (settings.darkmode_allow) { ?>	            
 				<li class="nav-item dark-switch">
 					<div class="form-group">
 						<div class="checkbox checbox-switch darkswitchbox">
 							<label>
-								<input type="checkbox" id="darkSwitch" />Dark
+								<input type="checkbox" id="darkSwitch" <? write(settings.darkmode_on ? 'checked' : '') ?> />Dark
 								<span></span>
 							</label>
               			</div>

webv4/root/index.xjs

@@ -56,7 +56,7 @@
 		<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet">
 		<link href="./css/offcanvas.css" rel="stylesheet">
 		<link href="./css/style.css" rel="stylesheet">
-<?xjs if (!settings.darkmode_off) { ?>	
+<?xjs if (settings.darkmode_allow) { ?>
 		<link href="./css/checkbox.css" rel="stylesheet">
 <?xjs } ?>
 		<? if (file_exists(settings.web_root + 'css/custom.css')) { ?>

webv4/root/js/common.js

@@ -90,10 +90,19 @@ function registerEventListener(scope, callback, params) {
 	};
 }
 
+function darkmodeRequested() {
+	const ls = JSON.parse(localStorage.getItem('darkSwitch'));
+	if (ls) return true;
+	if (ls === false) return false;
+	if ((window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)) return true;
+	if ($('#darkSwitch').prop('checked')) return true;
+	return false;
+}
+
 document.addEventListener('DOMContentLoaded', () => {
 	// originally based on dark-mode-switch by Christian Oliff
 	if ($('#darkSwitch').length) {
-		$('#darkSwitch').prop('checked', localStorage.getItem('darkSwitch') || (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches));
+		$('#darkSwitch').prop('checked', darkmodeRequested());
 		$('#darkSwitch').change(resetTheme);
 		resetTheme();
 		function resetTheme() {
@@ -102,7 +111,7 @@ document.addEventListener('DOMContentLoaded', () => {
 				localStorage.setItem('darkSwitch', true);
 			} else {
 				$('body').removeClass('dark');
-				localStorage.removeItem('darkSwitch');
+				localStorage.setItem('darkSwitch', false);
 			}
 		}
 	}