diff --git a/src/components/settings/AppearanceShims.tsx b/src/components/settings/AppearanceShims.tsx
new file mode 100644
index 00000000..a4bcae0b
--- /dev/null
+++ b/src/components/settings/AppearanceShims.tsx
@@ -0,0 +1,258 @@
+import { Store } from "@styled-icons/boxicons-regular";
+import { observer } from "mobx-react-lite";
+import { Link } from "react-router-dom";
+
+import { Text } from "preact-i18n";
+
+import TextAreaAutoSize from "../../lib/TextAreaAutoSize";
+
+import { useApplicationState } from "../../mobx/State";
+import { EmojiPack } from "../../mobx/stores/Settings";
+
+import {
+ Fonts,
+ FONTS,
+ FONT_KEYS,
+ MonospaceFonts,
+ MONOSPACE_FONTS,
+ MONOSPACE_FONT_KEYS,
+} from "../../context/Theme";
+
+import Checkbox from "../ui/Checkbox";
+import ColourSwatches from "../ui/ColourSwatches";
+import ComboBox from "../ui/ComboBox";
+import Radio from "../ui/Radio";
+import CategoryButton from "../ui/fluent/CategoryButton";
+import mutantSVG from "./mutant_emoji.svg";
+import notoSVG from "./noto_emoji.svg";
+import openmojiSVG from "./openmoji_emoji.svg";
+import twemojiSVG from "./twemoji_emoji.svg";
+
+import { ThemeBaseSelector } from "./appearance/ThemeBaseSelector";
+
+export const ThemeBaseSelectorShim = observer(() => {
+ const theme = useApplicationState().settings.theme;
+ return (
+
+
-