diff --git a/ctrl/modopts.ini b/ctrl/modopts.ini index e626bb2b1cd9deb21dba72e66d83822261261182..84d5f2129e5acdc7e3d80d30424d131b20618050 100644 --- a/ctrl/modopts.ini +++ b/ctrl/modopts.ini @@ -174,3 +174,5 @@ forum_extended_ascii=false max_messages=0 nodelist_ibbs = true + darkmode_off=false + diff --git a/webv4/components/navbar.xjs b/webv4/components/navbar.xjs index 149a76ef0a537b46939234c344be52f88337bda4..63fc1bedbb306c82d9fba40bb343ca503c598671 100644 --- a/webv4/components/navbar.xjs +++ b/webv4/components/navbar.xjs @@ -49,6 +49,7 @@ </ul> <ul class="nav navbar-nav navbar-right"> +<?xjs if (!settings.darkmode_off) { ?> <li class="nav-item dark-switch"> <div class="form-group"> <div class="checkbox checbox-switch darkswitchbox"> @@ -59,6 +60,7 @@ </div> </div> </li> +<?xjs } ?> <?xjs if (user.alias === settings.guest || user.number < 1) { ?> <?xjs if (settings.user_registration) { ?> <li> diff --git a/webv4/root/index.xjs b/webv4/root/index.xjs index cf4714de447dabcc522a18877b086e0843674cb1..b6a1f93a4726b65da3b52e28cf0248de90140703 100644 --- a/webv4/root/index.xjs +++ b/webv4/root/index.xjs @@ -56,7 +56,9 @@ <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) { ?> <link href="./css/checkbox.css" rel="stylesheet"> +<?xjs } ?> <? if (file_exists(settings.web_root + 'css/custom.css')) { ?> <link href="./css/custom.css" rel="stylesheet"> <? } ?> diff --git a/webv4/root/js/common.js b/webv4/root/js/common.js index fa41de293e2abc124a7c505048f162ef200daca7..fde6594bd89de41bcfeb3ab5848739149b8c2dd8 100644 --- a/webv4/root/js/common.js +++ b/webv4/root/js/common.js @@ -91,18 +91,22 @@ function registerEventListener(scope, callback, params) { }; } -document.addEventListener("DOMContentLoaded", function(){ +document.addEventListener("DOMContentLoaded", function () { // originally based on dark-mode-switch by Christian Oliff var darkSwitch = document.getElementById("darkSwitch"); if (darkSwitch) { initTheme(); - darkSwitch.addEventListener("change", function(event) { + darkSwitch.addEventListener("change", function (event) { resetTheme(); }); + function initTheme() { - var darkThemeSelected = - localStorage.getItem("darkSwitch") !== null && - localStorage.getItem("darkSwitch") === "dark"; + var darkThemeSelected; + if (localStorage.getItem("darkSwitch") !== null) { + darkThemeSelected = localStorage.getItem("darkSwitch") === "dark"; + } else { + darkThemeSelected = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; + } darkSwitch.checked = darkThemeSelected; if (darkThemeSelected) { jQuery("body").addClass("dark") @@ -110,13 +114,14 @@ document.addEventListener("DOMContentLoaded", function(){ jQuery("body").removeClass("dark"); } } + function resetTheme() { if (darkSwitch.checked) { jQuery("body").addClass("dark"); localStorage.setItem("darkSwitch", "dark"); } else { jQuery("body").removeClass("dark"); - localStorage.removeItem("darkSwitch"); + localStorage.setItem("darkSwitch", "light"); } } }