Update theme setup

src/lib/ThemeContext.svelte

@@ -0,0 +1,13 @@
+<svelte:head>
+    <script>
+        if (document) {
+            const defaultTheme = 'dark';
+            const itemTheme = localStorage.getItem("theme") ?? defaultTheme;
+
+            localStorage.setItem("theme", itemTheme);
+            document.documentElement.setAttribute("data-theme", itemTheme);
+        }
+    </script>
+</svelte:head>
+
+<slot></slot>

src/routes/+layout.svelte

@@ -1,27 +1,10 @@
 <script>
-    import Nav from '$lib/Nav.svelte';
+    import ThemeContext from "$lib/ThemeContext.svelte";
-    import Modal from '$lib/Modal.svelte'
+    import Nav from "$lib/Nav.svelte";
 </script>
 
-<style>
+<ThemeContext>
-    :global(html[data-theme='dark']) {
-        --background-color: #222222;
-        --headings-color: #ffffff;
-        --font-color: #ffffff;
-    }
-
-    :global(body) {
-        font-family: 'Open Sans', sans-serif;
-        font-size: 1rem;
-        background-color: var(--background-color);
-        color: var(--font-color);
-        box-sizing: border-box;
-    }
-</style>
-
-<Modal/>
     <Nav />
-
     <slot></slot>
-
     <footer class="container"></footer>
+</ThemeContext>

src/routes/+page.svelte

@@ -1,7 +1,6 @@
 <script>
-    import {onMount} from 'svelte';
+    import Thumb from "$lib/Thumbnail.svelte";
-    import Thumb from '$lib/Thumbnail.svelte'
+    import Banner from "$lib/Banner.svelte";
-    import Banner from '$lib/Banner.svelte'
 
     let games = [
         {
@@ -9,33 +8,19 @@
             link: "./sirius",
             img: "img/600x300.png",
             size: { width: 600, height: 300 },
-            description: "A 2D game about a wannabe space captain exploring the galaxy.",
+            description:
+                "A 2D game about a wannabe space captain exploring the galaxy.",
         },
         {
             name: "Quartz",
             link: "./sirius",
             img: "img/600x300.png",
             size: { width: 600, height: 300 },
-            description: "Test"
+            description: "Test",
-        }
+        },
-    ]
+    ];
-
-    onMount(async () => {
-
-    });
 </script>
 
-<style>
-    section {
-        border-radius: 5px;
-        padding: 5px 20px;
-    }
-
-    main {
-        margin-top: 30px;
-    }
-</style>
-
 <svelte:head>
     <title>Quartznet</title>
 </svelte:head>
@@ -49,3 +34,14 @@
         {/each}
     </section>
 </main>
+
+<style>
+    section {
+        border-radius: 5px;
+        padding: 5px 20px;
+    }
+
+    main {
+        margin-top: 30px;
+    }
+</style>

static/css/global.css

@@ -1,6 +1,5 @@
 
-/* Dark theme */
+html[data-theme='dark'] {
-:root {
   --background-color: #343a40;
   --header-color: #202225;
   --headings-color: #ffffff;
@@ -11,7 +10,6 @@
   --link-color-hover: #ffffff;
 }
 
-/* Light theme */
 html[data-theme='light'] {
   --background-color: #ffffff;
   --headings-color: #181818;
@@ -25,6 +23,7 @@ html[data-theme='light'] {
 
 body {
   background-color: var(--background-color);
+  box-sizing: border-box;
   color: var(--font-color);
   font-family: 'Open Sans', sans-serif;
   font-display: swap;