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;