From 7b9e1cdaa263ab765acfca14db6b1312a6474061 Mon Sep 17 00:00:00 2001
From: Bradley Shellnut <bradleyshellnut@protonmail.com>
Date: Tue, 30 Aug 2022 17:36:04 -0500
Subject: [PATCH] Fixing dark mode on load.

---
 src/app.html | 77 +++++++++++++++++++++++++++++-----------------------
 1 file changed, 43 insertions(+), 34 deletions(-)
diff --git a/src/app.html b/src/app.html
index d888584..df4aefd 100644
--- a/src/app.html
+++ b/src/app.html
@@ -1,41 +1,50 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="description" content="Bored? Find a game! Bored Game!" />
-    <link rel="icon" href="%sveltekit.assets%/favicon-bored.png" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <script>
-      const htmlElement = document.documentElement;
-      const userTheme = localStorage.theme;
-      const userFont = localStorage.font;
 
-      // check if the user set a theme
-      if (userTheme) {
-        htmlElement.dataset.theme = userTheme;
-      }
+<head>
+  <meta charset="utf-8" />
+  <meta name="description" content="Bored? Find a game! Bored Game!" />
+  <link rel="icon" href="%sveltekit.assets%/favicon-bored.png" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <script>
+    const htmlElement = document.documentElement;
+    const userTheme = localStorage.theme;
+    const userFont = localStorage.font;
 
-      // otherwise check for user preference
-      if (!userTheme && prefersDarkMode) {
-        htmlElement.dataset.theme = '🌛 Night';
-        localStorage.theme = '🌛 Night';
-      }
+    const prefersDarkMode = window.matchMedia(
+      'prefers-color-scheme: dark'
+    ).matches;
+    const prefersLightMode = window.matchMedia(
+      'prefers-color-scheme: light'
+    ).matches;
 
-      if (!userTheme && prefersLightMode) {
-        htmlElement.dataset.theme = '☀️ Daylight';
-        localStorage.theme = '☀️ Daylight';
-      }
+    // check if the user set a theme
+    if (userTheme) {
+      htmlElement.dataset.theme = userTheme;
+    }
 
-      // if nothing is set default to dark mode
-      if (!userTheme && !prefersDarkMode && !prefersLightMode) {
-        htmlElement.dataset.theme = '🌛 Night';
-        localStorage.theme = '🌛 Night';
-      }
-    </script>
-    %sveltekit.head%
-  </head>
+    // otherwise check for user preference
+    if (!userTheme && prefersDarkMode) {
+      htmlElement.dataset.theme = '🌛 Night';
+      localStorage.theme = '🌛 Night';
+    }
 
-  <body>
-    <div id="svelte">%sveltekit.body%</div>
-  </body>
-</html>
+    if (!userTheme && prefersLightMode) {
+      htmlElement.dataset.theme = '☀️ Daylight';
+      localStorage.theme = '☀️ Daylight';
+    }
+
+    // if nothing is set default to dark mode
+    if (!userTheme && !prefersDarkMode && !prefersLightMode) {
+      htmlElement.dataset.theme = '🌛 Night';
+      localStorage.theme = '🌛 Night';
+    }
+  </script>
+  %sveltekit.head%
+</head>
+
+<body>
+  <div id="svelte">%sveltekit.body%</div>
+</body>
+
+</html>
\ No newline at end of file
