Add base theme shop implementation and pane

- added theme shop settings pane
- added `generateVariables` for themes
- added `preview.svg` for previewing themes until a proper solution is made

src/context/Theme.tsx

@@ -278,14 +278,18 @@ export const PRESETS: Record<string, Theme> = {
 const keys = Object.keys(PRESETS.dark);
 const GlobalTheme = createGlobalStyle<{ theme: Theme }>`
 :root {
-	${(props) =>
-        (Object.keys(props.theme) as Variables[]).map((key) => {
-            if (!keys.includes(key)) return;
-            return `--${key}: ${props.theme[key]};`;
-        })}
+	${(props) => generateVariables(props.theme)}
 }
 `;
 
+export const generateVariables = (theme: Theme) => {
+    const mergedTheme = { ...PRESETS[theme.light ? 'light' : 'dark'], ...theme }
+    return (Object.keys(mergedTheme) as Variables[]).map((key) => {
+        if (!keys.includes(key)) return;
+        return `--${key}: ${mergedTheme[key]};`;
+    })
+}
+
 // Load the default default them and apply extras later
 export const ThemeContext = createContext<Theme>(PRESETS["dark"]);