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 Modal from '$lib/Modal.svelte'
+    import ThemeContext from "$lib/ThemeContext.svelte";
+    import Nav from "$lib/Nav.svelte";
 </script>
 
-<style>
-    :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>
+    <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 Banner from '$lib/Banner.svelte'
+    import Thumb from "$lib/Thumbnail.svelte";
+    import Banner from "$lib/Banner.svelte";
 
     let games = [
         {
@@ -9,22 +8,33 @@
             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"
-        }
-    ]
-
-    onMount(async () => {
-
-    });
+            description: "Test",
+        },
+    ];
 </script>
 
+<svelte:head>
+    <title>Quartznet</title>
+</svelte:head>
+
+<Banner />
+
+<main class="container">
+    <section>
+        {#each games as game}
+            <Thumb {...game} />
+        {/each}
+    </section>
+</main>
+
 <style>
     section {
         border-radius: 5px;
@@ -35,17 +45,3 @@
         margin-top: 30px;
     }
 </style>
-
-<svelte:head>
-    <title>Quartznet</title>
-</svelte:head>
-
-<Banner/>
-
-<main class="container">
-    <section>
-        {#each games as game}
-            <Thumb {...game}/>
-        {/each}
-    </section>
-</main>

static/css/global.css

@@ -1,6 +1,5 @@
 
-/* Dark theme */
-:root {
+html[data-theme='dark'] {
   --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;