patek/patek.cz
9
0
Fork 0
Code Issues 4 Pull Requests 2 Packages Projects Releases Wiki Activity

Add a button to toggle dark mode

Browse Source 
Also drop support for setting it through the URL query parameter
This commit is contained in:
Vojtěch Káně 2020-09-30 22:15:54 +02:00
parent f819d6108a
commit 10977c2e55
3 changed files with 35 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
themes/patek/assets/css/main.scss
View File

@ -233,6 +233,15 @@ h2 a {
} }
} }
.dark-mode-toggler {
padding: 1rem !important;
}
.dark-mode-toggler::before {
content: "🌔" !important;
}
.dark-mode-toggler::after {
content: none !important;
}
#content { #content {
min-height: 90vh; min-height: 90vh;
} }

34
themes/patek/assets/js/dark-mode.js
View File

@ -1,13 +1,27 @@
document.addEventListener("DOMContentLoaded", () => { function restoreDarkmode() {
if (window.location.search.indexOf("darkmode=false") > -1) { const elem = document.getElementById("content");
document.cookie = "darkmode=false; path=/"; if (elem && document.cookie.includes("dark-mode=true")) {
if (document.getElementById("content") !== null) { elem.classList.add("dark-mode");
document.getElementById("content").classList.remove("dark-mode"); }
} }
} else if (window.location.search.indexOf("darkmode=true") > -1 || document.cookie.indexOf("darkmode=true") > -1) {
document.cookie = "darkmode=true; path=/"; function toggleDarkmode() {
if (document.getElementById("content") !== null) { const elem = document.getElementById("content");
document.getElementById("content").classList.add("dark-mode"); if (elem) {
const state = elem.classList.toggle("dark-mode");
if (state) {
// 31536000 = 1 year; not setting max-age would make it session bound
document.cookie = "dark-mode=true; path=/; max-age=31536000; secure; samesite=strict";
} else {
// Delete the cookie by immediately expiring it
document.cookie = "dark-mode=; path=/; max-age=0; secure; samesite=strict";
} }
} }
}
document.addEventListener("DOMContentLoaded", restoreDarkmode);
document.addEventListener("DOMContentLoaded", () => {
for (const toggler of document.getElementsByClassName("dark-mode-toggler")) {
toggler.addEventListener("click", toggleDarkmode);
}
}); });

2
themes/patek/layouts/partials/menu.html
View File

@ -37,6 +37,8 @@
{{ end }} {{ end }}
</div> </div>
<div class="navbar-end"> <div class="navbar-end">
<div class="navbar-item is-hoverable dark-mode-toggler navbar-link" role="button">
</div>
<div class="navbar-item has-dropdown is-hoverable"> <div class="navbar-item has-dropdown is-hoverable">
<span class="navbar-link">{{ .Site.Language.LanguageName }}</span> <span class="navbar-link">{{ .Site.Language.LanguageName }}</span>
<div class="navbar-dropdown"> <div class="navbar-dropdown">