From b6e8e041096a921accd439db00c9171c0f68d91b Mon Sep 17 00:00:00 2001 From: Elizabeth Hunt Date: Wed, 27 Mar 2024 19:53:04 -0600 Subject: use media queries --- static/js/components/themeSwitcher.js | 2 +- static/js/util/setThemeBeforeRender.js | 10 ++++++---- 2 files changed, 7 insertions(+), 5 deletions(-) (limited to 'static/js') diff --git a/static/js/components/themeSwitcher.js b/static/js/components/themeSwitcher.js index 5f6d927..e5497f0 100644 --- a/static/js/components/themeSwitcher.js +++ b/static/js/components/themeSwitcher.js @@ -24,4 +24,4 @@ themeSwitcher.addEventListener("click", () => setTheme(flipFlopTheme(document.documentElement.getAttribute("data-theme"))), ); -setTheme(localStorage.getItem("theme") ?? THEMES.LIGHT); +setTheme(localStorage.getItem("theme") || THEMES.LIGHT); diff --git a/static/js/util/setThemeBeforeRender.js b/static/js/util/setThemeBeforeRender.js index d826193..b8f299a 100644 --- a/static/js/util/setThemeBeforeRender.js +++ b/static/js/util/setThemeBeforeRender.js @@ -1,6 +1,8 @@ +const preferredMode = window.matchMedia("(prefers-color-scheme: dark)").matches + ? "DARK" + : "LIGHT"; +localStorage.setItem("theme", localStorage.getItem("theme") || preferredMode); + // sets theme before rendering & jquery loaded to prevent flashing of uninitialized theme // (ugly white background) -document.documentElement.setAttribute( - "data-theme", - localStorage.getItem("theme"), -); +document.documentElement.setAttribute("data-theme", preferredMode); -- cgit v1.2.3-70-g09d2