1 files changed, 40 insertions, 26 deletions

diff --git a/components/themes.tsx b/components/themes.tsx
index be98685..547319f 100644
--- a/components/themes.tsx
+++ b/components/themes.tsx
@@ -1,7 +1,8 @@
-import { useEffect, useState, CSSProperties } from 'react';
 import axios from 'axios';
+import { CSSProperties, useContext, useEffect, useState } from 'react';
 
 import { userPreferences } from '../api/api';
+import PreferencesContext from '../components/preferencesContext';
 import { Button } from './ui';
 
 type previewThemeColors = {
@@ -9,19 +10,21 @@ type previewThemeColors = {
 	fg: string;
 	a: string;
 	b: string;
-}
+};
 
 export type themeInfo = {
 	name: string;
 	url: string;
 	dark: previewThemeColors;
 	light: previewThemeColors;
-}
+};
 
 export type themeJSON = themeInfo[];
 
-export default function ThemePicker(props: { preferences?: userPreferences }) {
-	var [ themes, setThemes ] = useState<themeJSON>([]);
+export default function ThemePicker(props: { preferences?: userPreferences; }) {
+	var { preferences, updatePreference } = useContext(PreferencesContext);
+
+	var [themes, setThemes] = useState<themeJSON>([]);
 
 	useEffect(() => {
 		axios.request<themeJSON>({
@@ -30,32 +33,43 @@ export default function ThemePicker(props: { preferences?: userPreferences }) {
 		}).then(response => {
 			setThemes(response.data);
 		}).catch(err => {
-			console.error(err)
-		})
+			console.error(err);
+		});
 	}, []);
 
 	return <>
-		{themes.map(theme => <ThemeCard theme={theme} dark={props.preferences?.darkMode}/>)}
+		{themes.map(theme =>
+			<ThemeCard
+				theme={theme}
+				dark={props.preferences?.darkMode}
+				setTheme={theme => updatePreference({ theme })}
+			/>
+		)}
 	</>;
 }
 
-export function ThemeCard(props: { theme: themeInfo; dark?: boolean }) {
-	var mode = props.dark ? "dark" : "light";
-
-	return <div className="dispinbl themeCardWrapper" style={{
-		"--bg": props.theme[mode].bg,
-		"--fg": props.theme[mode].fg,
-		"--a": props.theme[mode].a,
-		"--b": props.theme[mode].b,
-	} as CSSProperties}>
-	<Button className="themeCard dispinbl drop-1" onclick={() => {
-		document.getElementById("theme").setAttribute("href", "/themes/" + props.theme.url)
-	}}>
-			<span className="name">{props.theme.name}</span>
-				<div className="posabs r0 v0 disks">
-					<div className="disk posabs a"/>
-					<div className="disk posabs b"/>
-				</div>
+export function ThemeCard(props: {
+	theme: themeInfo;
+	dark?: boolean;
+	setTheme: (theme: string) => void;
+}) {
+	var mode = props.dark ? 'dark' : 'light';
+
+	return <div
+		className='dispinbl themeCardWrapper'
+		style={{
+			'--bg': props.theme[mode].bg,
+			'--fg': props.theme[mode].fg,
+			'--a': props.theme[mode].a,
+			'--b': props.theme[mode].b,
+		} as CSSProperties}
+	>
+		<Button className='themeCard dispinbl drop-1' onclick={() => props.setTheme(props.theme.url)}>
+			<span className='name'>{props.theme.name}</span>
+			<div className='posabs r0 v0 disks'>
+				<div className='disk posabs a' />
+				<div className='disk posabs b' />
+			</div>
 		</Button>
-	</div>
+	</div>;
 }