From 521de9ec7079aab276057810684509f73eec0eba Mon Sep 17 00:00:00 2001
From: Bauke <me@bauke.xyz>
Date: Thu, 13 Jan 2022 20:44:37 +0100
Subject: [PATCH] Create the context and setup for theming.

---
 source/scss/themes/_love.scss        |  1 -
 source/ts/single-page-application.ts | 17 +++++++++++++----
 source/ts/utilities/themes.ts        | 15 +++++++++++++++
 3 files changed, 28 insertions(+), 5 deletions(-)
 create mode 100644 source/ts/utilities/themes.ts

diff --git a/source/scss/themes/_love.scss b/source/scss/themes/_love.scss
index 6107d52..1202b18 100644
--- a/source/scss/themes/_love.scss
+++ b/source/scss/themes/_love.scss
@@ -1,4 +1,3 @@
-body,
 .love-dark {
   --border-radius: 8px;
   --foreground-1: #f2efff;
diff --git a/source/ts/single-page-application.ts b/source/ts/single-page-application.ts
index 7b108b9..0ed542d 100644
--- a/source/ts/single-page-application.ts
+++ b/source/ts/single-page-application.ts
@@ -9,13 +9,22 @@ import {Router} from 'preact-router';
 import HomePage from './pages/home.js';
 import NotFoundPage from './pages/not-found.js';
 import ReleasePage from './pages/release.js';
+import {themeContext, themes} from './utilities/themes.js';
+
+const savedTheme = window.localStorage.getItem('theme');
+const activeTheme =
+  themes.find((theme) => theme.cssClass === savedTheme) ?? themes[0];
+
+document.body.classList.value = activeTheme.cssClass;
 
 render(
   html`
-    <${Router}>
-      <${HomePage} path="/" />
-      <${ReleasePage} path="/release/:mbid" />
-      <${NotFoundPage} default />
+    <${themeContext.Provider} value=${activeTheme}>
+      <${Router}>
+        <${HomePage} path="/" />
+        <${ReleasePage} path="/release/:mbid" />
+        <${NotFoundPage} default />
+      <//>
     <//>
   `,
   document.body,
diff --git a/source/ts/utilities/themes.ts b/source/ts/utilities/themes.ts
new file mode 100644
index 0000000..3cf852d
--- /dev/null
+++ b/source/ts/utilities/themes.ts
@@ -0,0 +1,15 @@
+import {createContext} from 'preact';
+
+type Theme = {
+  cssClass: string;
+  name: string;
+};
+
+export const themes: Theme[] = [
+  {
+    cssClass: 'love-dark',
+    name: 'Love Dark',
+  },
+];
+
+export const themeContext = createContext<Theme>(themes[0]);