aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--src/templates/-base.html.tmpl38
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>