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/pages/settings/panes/Appearance.tsx

@@ -1,5 +1,5 @@
 import { Reset, Import } from "@styled-icons/boxicons-regular";
-import { Pencil } from "@styled-icons/boxicons-solid";
+import { Pencil, Store } from "@styled-icons/boxicons-solid";
 // @ts-expect-error shade-blend-color does not have typings.
 import pSBC from "shade-blend-color";
 
@@ -8,12 +8,16 @@ import { Text } from "preact-i18n";
 import { useCallback, useContext, useEffect, useState } from "preact/hooks";
 
 import TextAreaAutoSize from "../../../lib/TextAreaAutoSize";
+import CategoryButton from "../../../components/ui/fluent/CategoryButton";
+
+
 import { debounce } from "../../../lib/debounce";
 
 import { dispatch } from "../../../redux";
 import { connectState } from "../../../redux/connector";
 import { EmojiPacks, Settings } from "../../../redux/reducers/settings";
 
+
 import {
     DEFAULT_FONT,
     DEFAULT_MONO_FONT,
@@ -42,6 +46,7 @@ import mutantSVG from "../assets/mutant_emoji.svg";
 import notoSVG from "../assets/noto_emoji.svg";
 import openmojiSVG from "../assets/openmoji_emoji.svg";
 import twemojiSVG from "../assets/twemoji_emoji.svg";
+import { Link } from "react-router-dom";
 
 interface Props {
     settings: Settings;
@@ -131,15 +136,12 @@ export function Component(props: Props) {
                     </h4>
                 </div>
             </div>
-            {/*<Checkbox
-                    checked={props.settings.theme?.ligatures === true}
-                    onChange={() =>
-                        setTheme({
-                            ligatures: !props.settings.theme?.ligatures,
-                        })
-                    }>
-                    Use the system theme
-                </Checkbox>*/}
+
+            <Link to="/settings/theme_shop">
+                <CategoryButton icon={<Store size={24} />} action="chevron" hover>
+                    <Text id="app.settings.pages.theme_shop.title" />
+                </CategoryButton>
+            </Link>
 
             <h3>
                 <Text id="app.settings.pages.appearance.accent_selector" />