From 80b4d688350a2333224e83923cb12686ca81245d Mon Sep 17 00:00:00 2001 From: Evan Brierton <35705911+evanbrierton@users.noreply.github.com> Date: Mon, 29 Nov 2021 13:27:32 +0000 Subject: [PATCH 1/8] Add System Theme option to config register --- .DS_Store | Bin 0 -> 6148 bytes src/js/main.js | 5 ++++- 2 files changed, 4 insertions(+), 1 deletion(-) create mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..a83c0a94f2e95cbea85f0b399e2697724bb8bfa0 GIT binary patch literal 6148 zcmeHK&yUhT6n+CJbb*M8CVMey;&rX8*)=gzM1L!I|{RKoKQ0A(uk@92%jwn_+#*u(sA%2@TR5aU;X2(hze*V4jdKXLRT-Fs3NO z{E%T*5R*$iIzxR5?s>eg8JQT?2W=8nbhlFL@r;rbh%ixisj<#&LEz3ChlaK zwA}Ga?mdg+(EHJLz2|{H>(;Iv#L>hJB7ZCiLEneVs~17kk7uoT8ub&&?WhZuRkFIZ z?fHDaUf;3z?(Q#k?D@Srvc0!hSf%SXZ{I)eo`u6Gevimu0{enA&a+kHb<)rLt}~9p zIAT57yGm2J(!b3tnI)_0R5mi#vy10m2(pDEvt7x z_X3(;n^O4##%@A33K#|ctOERfuu&Kr8kY*?rvsHd0sspbmWDR}RbY;-v7vFP5LaMA zQGtpo^btcSI>v47*U-3BsOTj0;X~+|g+8GOIXmueOLr0tg{C$N7zNS_ { Dribbblish.config.register({ area: "Theme", type: "select", - data: { dark: "Dark", light: "Light", time: "Based on Time" }, + data: { dark: "Dark", light: "Light", time: "Based on Time", system: "Based on System Theme" }, order: -1, key: "theme", name: "Theme", @@ -621,6 +621,9 @@ Dribbblish.on("ready", () => { case "time": checkDarkLightMode(); break; + case "system": + checkDarkLightMode(); + break; } }, children: [ From 7e59834be4a9cb0ee14b0f059317b8ea06701105 Mon Sep 17 00:00:00 2001 From: Evan Brierton <35705911+evanbrierton@users.noreply.github.com> Date: Mon, 29 Nov 2021 13:28:01 +0000 Subject: [PATCH 2/8] Implement system theme check in checkDarkLightMode --- src/js/main.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/js/main.js b/src/js/main.js index e1d997f..cf071b7 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -512,6 +512,9 @@ Dribbblish.on("ready", () => { else dark = start <= time && time < end; toggleDark(dark); } + if (theme === "system") { + toggleDark(window.matchMedia("(prefers-color-scheme: dark)").matches); + } } // Run every Minute to check time and set dark / light mode From 1a6198465698d8f5d0e329017c2ab0c5bbdca21d Mon Sep 17 00:00:00 2001 From: Evan Brierton <35705911+evanbrierton@users.noreply.github.com> Date: Mon, 29 Nov 2021 13:28:16 +0000 Subject: [PATCH 3/8] Increase frequency of checkDarkLightMode interval to 1s --- src/js/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/main.js b/src/js/main.js index cf071b7..84ca932 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -518,7 +518,7 @@ Dribbblish.on("ready", () => { } // Run every Minute to check time and set dark / light mode - setInterval(checkDarkLightMode, 60000); + setInterval(checkDarkLightMode, 1000); Dribbblish.config.register({ area: "Theme", From 7e9639895809060b67712e1bfb058393d32c5386 Mon Sep 17 00:00:00 2001 From: Evan Brierton <35705911+evanbrierton@users.noreply.github.com> Date: Mon, 29 Nov 2021 13:32:16 +0000 Subject: [PATCH 4/8] Delete .DS_Store --- .DS_Store | Bin 6148 -> 0 bytes 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store deleted file mode 100644 index a83c0a94f2e95cbea85f0b399e2697724bb8bfa0..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6148 zcmeHK&yUhT6n+CJbb*M8CVMey;&rX8*)=gzM1L!I|{RKoKQ0A(uk@92%jwn_+#*u(sA%2@TR5aU;X2(hze*V4jdKXLRT-Fs3NO z{E%T*5R*$iIzxR5?s>eg8JQT?2W=8nbhlFL@r;rbh%ixisj<#&LEz3ChlaK zwA}Ga?mdg+(EHJLz2|{H>(;Iv#L>hJB7ZCiLEneVs~17kk7uoT8ub&&?WhZuRkFIZ z?fHDaUf;3z?(Q#k?D@Srvc0!hSf%SXZ{I)eo`u6Gevimu0{enA&a+kHb<)rLt}~9p zIAT57yGm2J(!b3tnI)_0R5mi#vy10m2(pDEvt7x z_X3(;n^O4##%@A33K#|ctOERfuu&Kr8kY*?rvsHd0sspbmWDR}RbY;-v7vFP5LaMA zQGtpo^btcSI>v47*U-3BsOTj0;X~+|g+8GOIXmueOLr0tg{C$N7zNS_ Date: Mon, 29 Nov 2021 20:22:08 +0000 Subject: [PATCH 5/8] Revert setInterval to once per minute for checkDarkLightMode --- src/js/main.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/js/main.js b/src/js/main.js index 84ca932..97b84e6 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -518,8 +518,8 @@ Dribbblish.on("ready", () => { } // Run every Minute to check time and set dark / light mode - setInterval(checkDarkLightMode, 1000); - + setInterval(checkDarkLightMode, 60000); + Dribbblish.config.register({ area: "Theme", type: "select", From 5d5d1bc3c1ebbad99c36715a2d549795d6803847 Mon Sep 17 00:00:00 2001 From: Evan Brierton <35705911+evanbrierton@users.noreply.github.com> Date: Mon, 29 Nov 2021 20:24:55 +0000 Subject: [PATCH 6/8] Use event listener for match system theme --- src/js/main.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/js/main.js b/src/js/main.js index 97b84e6..a86f25f 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -512,14 +512,15 @@ Dribbblish.on("ready", () => { else dark = start <= time && time < end; toggleDark(dark); } - if (theme === "system") { - toggleDark(window.matchMedia("(prefers-color-scheme: dark)").matches); - } } // Run every Minute to check time and set dark / light mode setInterval(checkDarkLightMode, 60000); + window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", e => { + if (theme === "system") toggleDark(e.matches); + }); + Dribbblish.config.register({ area: "Theme", type: "select", From eb87c41128496f3285ed1d3cb16a49e483c01e76 Mon Sep 17 00:00:00 2001 From: Evan Brierton <35705911+evanbrierton@users.noreply.github.com> Date: Mon, 29 Nov 2021 20:31:40 +0000 Subject: [PATCH 7/8] Actually read theme from config --- src/js/main.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/js/main.js b/src/js/main.js index a86f25f..66206db 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -518,6 +518,7 @@ Dribbblish.on("ready", () => { setInterval(checkDarkLightMode, 60000); window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", e => { + const theme = Dribbblish.config.get("theme"); if (theme === "system") toggleDark(e.matches); }); From 200b112fe1c81118d7ec9602684067a3c4e32e85 Mon Sep 17 00:00:00 2001 From: Evan Brierton <35705911+evanbrierton@users.noreply.github.com> Date: Tue, 30 Nov 2021 12:00:41 +0000 Subject: [PATCH 8/8] Add fix to switch to system theme when option is selected --- src/js/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/main.js b/src/js/main.js index 66206db..f78b252 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -627,7 +627,7 @@ Dribbblish.on("ready", () => { checkDarkLightMode(); break; case "system": - checkDarkLightMode(); + toggleDark(window.matchMedia("(prefers-color-scheme: dark)").matches); break; } },