From 05bbeda4e060f341a64b4d47fd618224f6b73bb1 Mon Sep 17 00:00:00 2001 From: hedy Date: Thu, 18 Jan 2024 10:02:12 +0800 Subject: Dark: Set correct theme immediately when the script loads This fixes the latency previously observed on page loads. We still have to put switch toggling after page loads though. Genius idea by wookie. Co-authored-by: wookie184 --- pydis_site/static/js/base/themes.js | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) (limited to 'pydis_site/static/js') diff --git a/pydis_site/static/js/base/themes.js b/pydis_site/static/js/base/themes.js index c1a5f006..9c279d21 100644 --- a/pydis_site/static/js/base/themes.js +++ b/pydis_site/static/js/base/themes.js @@ -59,19 +59,19 @@ function toggleThemeSwitch(newTheme) { } } -// Executed when the page has finished loading. -document.addEventListener("DOMContentLoaded", () => { - let theme; - const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)"); +let theme; +const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)"); - if (systemPrefersDark.matches) - theme = getCurrentTheme("dark"); - else - theme = getCurrentTheme(); +if (systemPrefersDark.matches) + theme = getCurrentTheme("dark"); +else + theme = getCurrentTheme(); - setStyleSheets(theme); - toggleThemeSwitch(theme); +setStyleSheets(theme); +// Executed when the page has finished loading. +document.addEventListener("DOMContentLoaded", () => { + toggleThemeSwitch(theme); systemPrefersDark.addEventListener("change", ({matches: isDark}) => { const newTheme = isDark ? "dark" : "light"; // Let the new system preference take precedence over toggle preference -- cgit v1.2.3