Use view transitionsHEADmaster

1 files changed, 24 insertions, 14 deletions

diff --git a/src/templates/-base.html.tmpl b/src/templates/-base.html.tmpl
index f455a14..2e78a7c 100644
--- a/src/templates/-base.html.tmpl
+++ b/src/templates/-base.html.tmpl
@@ -14,22 +14,32 @@
 			const $$ = q => document.querySelectorAll(q);
 
 			(() => {
-				const validate = theme =>
-					  ["light", "dark"].includes(theme) ? theme : "light";
-				const toggle = theme =>
-					  theme == "light" ? "dark" : "light";
+				document.addEventListener("DOMContentLoaded", _ => {
+					const root = $("html");
+					const icons = {
+						light: $("#nav-icon-theme-light"),
+						dark:  $("#nav-icon-theme-dark"),
+					};
 
-				const setTheme = theme => {
-					localStorage.setItem("theme", theme);
-					$("html").setAttribute("data-theme", theme);
-					$(`#nav-icon-theme-${theme}`).style.display = "";
-					$(`#nav-icon-theme-${toggle(theme)}`).style.display = "none";
-				};
+					const toggle = theme =>
+						  theme === "light" ? "dark" : "light"
 
-				document.addEventListener("DOMContentLoaded", _ => {
-					$("#theme-button").onclick = () =>
-						setTheme(toggle(validate(localStorage.getItem("theme"))));
-					setTheme(validate(localStorage.getItem("theme")));
+					const setTheme = theme => {
+						localStorage.setItem("theme", theme);
+						root.setAttribute("data-theme", theme);
+						icons[theme].style.display = "";
+						icons[toggle(theme)].style.display = "none";
+					};
+
+					/* Double toggle to handle invalid theme */
+					setTheme(toggle(toggle(localStorage.getItem("theme"))));
+					$("#theme-button").onclick = () => {
+						const theme = toggle(localStorage.getItem("theme"));
+						if (document.startViewTransition)
+							document.startViewTransition(() => setTheme(theme));
+						else
+							setTheme(theme);
+					};
 				});
 			})();
 		</script>