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 <[email protected]>

1 files changed, 10 insertions, 10 deletions

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