From 266d996237486306cac3f438a848f9855cf3d9f9 Mon Sep 17 00:00:00 2001 From: Sijisu Date: Tue, 3 Aug 2021 18:44:50 +0000 Subject: [PATCH 1/5] Update themes/patek/assets/js/dark-mode.js --- themes/patek/assets/js/dark-mode.js | 32 +++++++++++++++++------------ 1 file changed, 19 insertions(+), 13 deletions(-) diff --git a/themes/patek/assets/js/dark-mode.js b/themes/patek/assets/js/dark-mode.js index d5c45b0..4c18eb9 100644 --- a/themes/patek/assets/js/dark-mode.js +++ b/themes/patek/assets/js/dark-mode.js @@ -1,22 +1,28 @@ function restoreDarkmode() { - const elem = document.getElementById("content"); - if (elem && document.cookie.includes("dark-mode=true")) { - elem.classList.add("dark-mode"); + const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)"); + const elem = document.getElementById("content"); + if(!document.cookie.includes("dark-mode=")) { + if (prefersDarkMode.matches) { + elem.classList.add("dark-mode"); + } + } + if (elem && document.cookie.includes("dark-mode=on")) { + elem.classList.add("dark-mode"); } } function toggleDarkmode() { - const elem = document.getElementById("content"); - if (elem) { - const state = elem.classList.toggle("dark-mode"); - if (state) { + const elem = document.getElementById("content"); + 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.cookie = 'dark-mode=on; path=/; max-age=31536000; secure; samesite=strict'; + } else { + // We have to set the off preference as well, so it can override the OS setting + document.cookie = 'dark-mode=off; path=/; max-age=31536000; secure; samesite=strict'; + } + } } document.addEventListener("DOMContentLoaded", restoreDarkmode); From c9195bd11dfa50bcbc874b21afce251e41d2495d Mon Sep 17 00:00:00 2001 From: Sijisu Date: Tue, 3 Aug 2021 18:50:05 +0000 Subject: [PATCH 2/5] Hopefully fix indentation --- themes/patek/assets/js/dark-mode.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/themes/patek/assets/js/dark-mode.js b/themes/patek/assets/js/dark-mode.js index 4c18eb9..195c5a2 100644 --- a/themes/patek/assets/js/dark-mode.js +++ b/themes/patek/assets/js/dark-mode.js @@ -6,9 +6,9 @@ function restoreDarkmode() { elem.classList.add("dark-mode"); } } - if (elem && document.cookie.includes("dark-mode=on")) { + if (elem && document.cookie.includes("dark-mode=on")) { elem.classList.add("dark-mode"); - } + } } function toggleDarkmode() { @@ -16,10 +16,10 @@ function toggleDarkmode() { if (elem) { const state = elem.classList.toggle('dark-mode'); if (state) { - // 31536000 = 1 year; not setting max-age would make it session bound + // 31536000 = 1 year; not setting max-age would make it session bound document.cookie = 'dark-mode=on; path=/; max-age=31536000; secure; samesite=strict'; } else { - // We have to set the off preference as well, so it can override the OS setting + // We have to set the off preference as well, so it can override the OS setting document.cookie = 'dark-mode=off; path=/; max-age=31536000; secure; samesite=strict'; } } From 8ead6a8b9d039c885b2b1f7fc56f8687be13c2f0 Mon Sep 17 00:00:00 2001 From: Sijisu Date: Tue, 3 Aug 2021 21:01:32 +0200 Subject: [PATCH 3/5] Hopefully fix indentation #2 --- themes/patek/assets/js/dark-mode.js | 44 +++++++++++++++-------------- 1 file changed, 23 insertions(+), 21 deletions(-) diff --git a/themes/patek/assets/js/dark-mode.js b/themes/patek/assets/js/dark-mode.js index 195c5a2..43df99f 100644 --- a/themes/patek/assets/js/dark-mode.js +++ b/themes/patek/assets/js/dark-mode.js @@ -1,28 +1,30 @@ function restoreDarkmode() { - const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)"); - const elem = document.getElementById("content"); - if(!document.cookie.includes("dark-mode=")) { - if (prefersDarkMode.matches) { - elem.classList.add("dark-mode"); - } - } - if (elem && document.cookie.includes("dark-mode=on")) { - elem.classList.add("dark-mode"); - } + const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)"); + const elem = document.getElementById("content"); + + if (!document.cookie.includes("dark-mode=")) { + if (prefersDarkMode.matches) { + elem.classList.add("dark-mode"); + } + } + + if (elem && document.cookie.includes("dark-mode=on")) { + elem.classList.add("dark-mode"); + } } function toggleDarkmode() { - const elem = document.getElementById("content"); - 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=on; path=/; max-age=31536000; secure; samesite=strict'; - } else { - // We have to set the off preference as well, so it can override the OS setting - document.cookie = 'dark-mode=off; path=/; max-age=31536000; secure; samesite=strict'; - } - } + const elem = document.getElementById("content"); + 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=on; path=/; max-age=31536000; secure; samesite=strict"; + } else { + // We have to set the off preference as well, so it can override the OS setting + document.cookie = "dark-mode=off; path=/; max-age=31536000; secure; samesite=strict"; + } + } } document.addEventListener("DOMContentLoaded", restoreDarkmode); From ebd2774eab6a2ef3fb638e78ad01f076d6db2bc0 Mon Sep 17 00:00:00 2001 From: Sijisu Date: Tue, 3 Aug 2021 21:03:24 +0200 Subject: [PATCH 4/5] Hopefully fix indentation #3 --- themes/patek/assets/js/dark-mode.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/themes/patek/assets/js/dark-mode.js b/themes/patek/assets/js/dark-mode.js index 43df99f..a5217a4 100644 --- a/themes/patek/assets/js/dark-mode.js +++ b/themes/patek/assets/js/dark-mode.js @@ -1,7 +1,7 @@ function restoreDarkmode() { const prefersDarkMode = window.matchMedia("(prefers-color-scheme: dark)"); const elem = document.getElementById("content"); - + if (!document.cookie.includes("dark-mode=")) { if (prefersDarkMode.matches) { elem.classList.add("dark-mode"); From d3fc74e9ee739927084303bd7bb1494a3d04bc76 Mon Sep 17 00:00:00 2001 From: Greenscreener Date: Wed, 4 Aug 2021 11:41:33 +0200 Subject: [PATCH 5/5] The homepage has no #content, so elem would be null and an error would be thrown without this check. --- themes/patek/assets/js/dark-mode.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/themes/patek/assets/js/dark-mode.js b/themes/patek/assets/js/dark-mode.js index a5217a4..7cc5468 100644 --- a/themes/patek/assets/js/dark-mode.js +++ b/themes/patek/assets/js/dark-mode.js @@ -3,7 +3,7 @@ function restoreDarkmode() { const elem = document.getElementById("content"); if (!document.cookie.includes("dark-mode=")) { - if (prefersDarkMode.matches) { + if (elem && prefersDarkMode.matches) { elem.classList.add("dark-mode"); } }