diff --git a/webv4/components/navbar.xjs b/webv4/components/navbar.xjs index 63fc1bedbb306c82d9fba40bb343ca503c598671..04b78e66719eddcf2ede346d0bd7a5d665cef95f 100644 --- a/webv4/components/navbar.xjs +++ b/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> diff --git a/webv4/root/index.xjs b/webv4/root/index.xjs index b6a1f93a4726b65da3b52e28cf0248de90140703..efe46a830cfc93e0592da7a0a173733e8cfe3be8 100644 --- a/webv4/root/index.xjs +++ b/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')) { ?> diff --git a/webv4/root/js/common.js b/webv4/root/js/common.js index cdb76a5f87e6772fc64a395ce04a0ebc2c0d08d3..79c5e6c87a7a2aef6b749e9dbe8dae61c3240fdb 100644 --- a/webv4/root/js/common.js +++ b/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); } } }