From 4895fec079aa230dd0fd3269315843dc6ff670fa Mon Sep 17 00:00:00 2001
From: echicken <echicken@bbs.electronicchicken.com>
Date: Wed, 17 Feb 2021 16:54:00 -0500
Subject: [PATCH] Support for darkmode_allow and darkmode-on
---
webv4/components/navbar.xjs | 4 ++--
webv4/root/index.xjs | 2 +-
webv4/root/js/common.js | 13 +++++++++++--
3 files changed, 14 insertions(+), 5 deletions(-)
diff --git a/webv4/components/navbar.xjs b/webv4/components/navbar.xjs
index 63fc1bedbb..04b78e6671 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 b6a1f93a47..efe46a830c 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 cdb76a5f87..79c5e6c87a 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);
}
}
}
--
GitLab