Create the context and setup for theming.

source/scss/themes/_love.scss

@@ -1,4 +1,3 @@
-body,
 .love-dark {
   --border-radius: 8px;
   --foreground-1: #f2efff;

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}>
+    <${themeContext.Provider} value=${activeTheme}>
-      <${HomePage} path="/" />
+      <${Router}>
-      <${ReleasePage} path="/release/:mbid" />
+        <${HomePage} path="/" />
-      <${NotFoundPage} default />
+        <${ReleasePage} path="/release/:mbid" />
+        <${NotFoundPage} default />
+      <//>
     <//>
   `,
   document.body,

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]);