From ca010938db8720cc18f9b14ec0cc87a789ba2e77 Mon Sep 17 00:00:00 2001
From: Chris Dill <chris.rj.dill@gmail.com>
Date: Fri, 31 May 2024 19:42:50 +0100
Subject: [PATCH] Update theme setup

---
 src/lib/ThemeContext.svelte | 13 +++++++++++
 src/routes/+layout.svelte   | 31 ++++++-------------------
 src/routes/+page.svelte     | 46 +++++++++++++++++--------------------
 static/css/global.css       |  5 ++--
 4 files changed, 43 insertions(+), 52 deletions(-)
 create mode 100644 src/lib/ThemeContext.svelte

diff --git a/src/lib/ThemeContext.svelte b/src/lib/ThemeContext.svelte
new file mode 100644
index 0000000..ff57d29
--- /dev/null
+++ b/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>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 18689ce..1bc7fe0 100644
--- a/src/routes/+layout.svelte
+++ b/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>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index b9ca06c..3ba9da9 100644
--- a/src/routes/+page.svelte
+++ b/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>
diff --git a/static/css/global.css b/static/css/global.css
index 9fd22a7..e4092d7 100755
--- a/static/css/global.css
+++ b/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;