Merge pull request #225 from brecert/theme_shop

Fix theme shop themes not applying as a base

src/pages/settings/panes/Appearance.tsx

@@ -98,7 +98,7 @@ export function Component(props: Props) {
 
     useEffect(() => setOverride({ css }), [setOverride, css]);
 
-    const selected = props.settings.theme?.preset ?? "dark";
+    const selected = props.settings.theme?.base ?? "dark";
     return (
         <div className={styles.appearance}>
             <h3>
@@ -113,7 +113,7 @@ export function Component(props: Props) {
                         data-active={selected === "light"}
                         onClick={() =>
                             selected !== "light" &&
-                            setTheme({ preset: "light" })
+                            setTheme({ base: "light" })
                         }
                         onContextMenu={(e) => e.preventDefault()}
                     />
@@ -128,7 +128,7 @@ export function Component(props: Props) {
                         draggable={false}
                         data-active={selected === "dark"}
                         onClick={() =>
-                            selected !== "dark" && setTheme({ preset: "dark" })
+                            selected !== "dark" && setTheme({ base: "dark" })
                         }
                         onContextMenu={(e) => e.preventDefault()}
                     />

src/pages/settings/panes/ThemeShop.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from "preact/hooks";
 
 import { dispatch } from "../../../redux";
 
-import { Theme, generateVariables } from "../../../context/Theme";
+import { Theme, generateVariables, ThemeOptions } from "../../../context/Theme";
 
 import Tip from "../../../components/ui/Tip";
 import previewPath from "../assets/preview.svg";
@@ -21,14 +21,14 @@ export const fetchTheme = (slug: string): Promise<Theme> =>
         res.json(),
     );
 
-interface ThemeMetadata {
+export interface ThemeMetadata {
     name: string;
     creator: string;
     commit?: string;
     description: string;
 }
 
-type Manifest = {
+export type Manifest = {
     generated: string;
     themes: Record<string, ThemeMetadata>;
 };
@@ -189,14 +189,21 @@ export function ThemeShop() {
                         <div class="description">{theme.description}</div>
                         <button
                             class="preview"
-                            onClick={() =>
+                            onClick={() => {
+                                dispatch({
+                                    type: "THEMES_SET_THEME",
+                                    theme: {
+                                        slug,
+                                        meta: theme,
+                                        theme: themeData[slug]
+                                    }
+                                })
+
                                 dispatch({
                                     type: "SETTINGS_SET_THEME",
-                                    theme: {
-                                        custom: themeData[slug],
-                                    },
-                                })
-                            }>
+                                    theme: { base: slug },
+                                });
+                            }}>
                             <ThemePreview slug={slug} theme={themeData[slug]} />
                         </button>
                     </ThemeInfo>