From db64d9869ce393030279caa0cdfbd64b327869ad Mon Sep 17 00:00:00 2001
From: Martin Fournier <martin@mfournier.com>
Date: Sat, 18 Dec 2021 16:22:10 -0500
Subject: [PATCH] Add easily switchable predefined themes

Includes the default theme and a Monokai-ish variant
---
 src/Settings/Settings.ts          | 110 +------
 src/Settings/Themes.ts            | 110 +++++++
 src/ui/React/ThemeEditorModal.tsx | 497 ++++++++++++++++--------------
 3 files changed, 373 insertions(+), 344 deletions(-)
 create mode 100644 src/Settings/Themes.ts

diff --git a/src/Settings/Settings.ts b/src/Settings/Settings.ts
index 8a4cbdd31..a1cc7d006 100644
--- a/src/Settings/Settings.ts
+++ b/src/Settings/Settings.ts
@@ -1,5 +1,6 @@
 import { ISelfInitializer, ISelfLoading } from "../types";
 import { OwnedAugmentationsOrderSetting, PurchaseAugmentationsOrderSetting } from "./SettingEnums";
+import { defaultTheme, ITheme } from "./Themes";
 
 /**
  * Represents the default settings the player could customize.
@@ -111,42 +112,7 @@ interface IDefaultSettings {
   /*
    * Theme colors
    */
-  theme: {
-    [key: string]: string | undefined;
-    primarylight: string;
-    primary: string;
-    primarydark: string;
-    successlight: string;
-    success: string;
-    successdark: string;
-    errorlight: string;
-    error: string;
-    errordark: string;
-    secondarylight: string;
-    secondary: string;
-    secondarydark: string;
-    warninglight: string;
-    warning: string;
-    warningdark: string;
-    infolight: string;
-    info: string;
-    infodark: string;
-    welllight: string;
-    well: string;
-    white: string;
-    black: string;
-    hp: string;
-    money: string;
-    hack: string;
-    combat: string;
-    cha: string;
-    int: string;
-    rep: string;
-    disabled: string;
-    backgroundprimary: string;
-    backgroundsecondary: string;
-    button: string;
-  };
+  theme: ITheme;
 }
 
 /**
@@ -193,41 +159,7 @@ export const defaultSettings: IDefaultSettings = {
   SuppressTIXPopup: false,
   SuppressSavedGameToast: false,
 
-  theme: {
-    primarylight: "#0f0",
-    primary: "#0c0",
-    primarydark: "#090",
-    successlight: "#0f0",
-    success: "#0c0",
-    successdark: "#090",
-    errorlight: "#f00",
-    error: "#c00",
-    errordark: "#900",
-    secondarylight: "#AAA",
-    secondary: "#888",
-    secondarydark: "#666",
-    warninglight: "#ff0",
-    warning: "#cc0",
-    warningdark: "#990",
-    infolight: "#69f",
-    info: "#36c",
-    infodark: "#039",
-    welllight: "#444",
-    well: "#222",
-    white: "#fff",
-    black: "#000",
-    hp: "#dd3434",
-    money: "#ffd700",
-    hack: "#adff2f",
-    combat: "#faffdf",
-    cha: "#a671d1",
-    int: "#6495ed",
-    rep: "#faffdf",
-    disabled: "#66cfbc",
-    backgroundprimary: "#000",
-    backgroundsecondary: "#000",
-    button: "#333",
-  },
+  theme: defaultTheme,
 };
 
 /**
@@ -262,41 +194,7 @@ export const Settings: ISettings & ISelfInitializer & ISelfLoading = {
   MonacoInsertSpaces: false,
   MonacoFontSize: 20,
 
-  theme: {
-    primarylight: defaultSettings.theme.primarylight,
-    primary: defaultSettings.theme.primary,
-    primarydark: defaultSettings.theme.primarydark,
-    successlight: defaultSettings.theme.successlight,
-    success: defaultSettings.theme.success,
-    successdark: defaultSettings.theme.successdark,
-    errorlight: defaultSettings.theme.errorlight,
-    error: defaultSettings.theme.error,
-    errordark: defaultSettings.theme.errordark,
-    secondarylight: defaultSettings.theme.secondarylight,
-    secondary: defaultSettings.theme.secondary,
-    secondarydark: defaultSettings.theme.secondarydark,
-    warninglight: defaultSettings.theme.warninglight,
-    warning: defaultSettings.theme.warning,
-    warningdark: defaultSettings.theme.warningdark,
-    infolight: defaultSettings.theme.infolight,
-    info: defaultSettings.theme.info,
-    infodark: defaultSettings.theme.infodark,
-    welllight: defaultSettings.theme.welllight,
-    well: defaultSettings.theme.well,
-    white: defaultSettings.theme.white,
-    black: defaultSettings.theme.black,
-    hp: defaultSettings.theme.hp,
-    money: defaultSettings.theme.money,
-    hack: defaultSettings.theme.hack,
-    combat: defaultSettings.theme.combat,
-    cha: defaultSettings.theme.cha,
-    int: defaultSettings.theme.int,
-    rep: defaultSettings.theme.rep,
-    disabled: defaultSettings.theme.disabled,
-    backgroundprimary: defaultSettings.theme.backgroundprimary,
-    backgroundsecondary: defaultSettings.theme.backgroundsecondary,
-    button: defaultSettings.theme.button,
-  },
+  theme: { ...defaultTheme },
   init() {
     Object.assign(Settings, defaultSettings);
   },
diff --git a/src/Settings/Themes.ts b/src/Settings/Themes.ts
new file mode 100644
index 000000000..a67ac4bd7
--- /dev/null
+++ b/src/Settings/Themes.ts
@@ -0,0 +1,110 @@
+export interface ITheme {
+  [key: string]: string | undefined;
+  primarylight: string;
+  primary: string;
+  primarydark: string;
+  successlight: string;
+  success: string;
+  successdark: string;
+  errorlight: string;
+  error: string;
+  errordark: string;
+  secondarylight: string;
+  secondary: string;
+  secondarydark: string;
+  warninglight: string;
+  warning: string;
+  warningdark: string;
+  infolight: string;
+  info: string;
+  infodark: string;
+  welllight: string;
+  well: string;
+  white: string;
+  black: string;
+  hp: string;
+  money: string;
+  hack: string;
+  combat: string;
+  cha: string;
+  int: string;
+  rep: string;
+  disabled: string;
+  backgroundprimary: string;
+  backgroundsecondary: string;
+  button: string;
+}
+
+export const defaultTheme: ITheme = {
+  primarylight: "#0f0",
+  primary: "#0c0",
+  primarydark: "#090",
+  successlight: "#0f0",
+  success: "#0c0",
+  successdark: "#090",
+  errorlight: "#f00",
+  error: "#c00",
+  errordark: "#900",
+  secondarylight: "#AAA",
+  secondary: "#888",
+  secondarydark: "#666",
+  warninglight: "#ff0",
+  warning: "#cc0",
+  warningdark: "#990",
+  infolight: "#69f",
+  info: "#36c",
+  infodark: "#039",
+  welllight: "#444",
+  well: "#222",
+  white: "#fff",
+  black: "#000",
+  hp: "#dd3434",
+  money: "#ffd700",
+  hack: "#adff2f",
+  combat: "#faffdf",
+  cha: "#a671d1",
+  int: "#6495ed",
+  rep: "#faffdf",
+  disabled: "#66cfbc",
+  backgroundprimary: "#000",
+  backgroundsecondary: "#000",
+  button: "#333",
+};
+
+export interface IPredefinedThemes {
+  'Default': ITheme;
+  'Monokai': ITheme;
+}
+
+export const getPredefinedThemes = (): IPredefinedThemes => ({
+  'Default': defaultTheme,
+  'Monokai': {
+    ...defaultTheme,
+
+    backgroundprimary: '#272822',
+    backgroundsecondary: '#1B1C18',
+    primary: '#F8F8F2',
+    primarylight: '#FFF',
+    primarydark: '#FAFAEB',
+    success: '#A6E22E',
+    successlight: '#ADE146',
+    successdark: '#98E104',
+    error: '#F92672',
+    errorlight: '#FF69A0',
+    errordark: '#D10F56',
+    warning: '#E6DB74',
+    warninglight: '#E1D992',
+    warningdark: '#EDDD54',
+    info: '#66D9EF',
+    infolight: '#92E1F1',
+    infodark: '#31CDED',
+
+    hp: '#F92672',
+    money: '#E6DB74',
+    hack: '#A6E22E',
+    combat: '#75715E',
+    cha: '#AE81FF',
+    int: '#66D9EF',
+    rep: '#E69F66',
+  }
+});
diff --git a/src/ui/React/ThemeEditorModal.tsx b/src/ui/React/ThemeEditorModal.tsx
index b8b1f204d..6582ea377 100644
--- a/src/ui/React/ThemeEditorModal.tsx
+++ b/src/ui/React/ThemeEditorModal.tsx
@@ -7,9 +7,11 @@ import Paper from "@mui/material/Paper";
 import TextField from "@mui/material/TextField";
 import IconButton from "@mui/material/IconButton";
 import ReplyIcon from "@mui/icons-material/Reply";
+import PaletteSharpIcon from "@mui/icons-material/PaletteSharp";
 import { Color, ColorPicker } from "material-ui-color";
 import { ThemeEvents } from "./Theme";
 import { Settings, defaultSettings } from "../../Settings/Settings";
+import { ITheme, getPredefinedThemes } from "../../Settings/Themes";
 
 interface IProps {
   open: boolean;
@@ -64,11 +66,18 @@ export function ThemeEditorModal(props: IProps): React.ReactElement {
     ...Settings.theme,
   });
 
-  function resetTheme(): void {
-    setCustomTheme({
-      ...defaultSettings.theme,
-    });
-    Object.assign(Settings.theme, defaultSettings.theme);
+  const predefinedThemes = getPredefinedThemes();
+  const themes = predefinedThemes && Object.entries(predefinedThemes)
+    .map(([name, templateTheme]) => (
+      <Button onClick={() => setTemplateTheme(templateTheme)}
+        startIcon={<PaletteSharpIcon />} key={name} sx={{ mr: 1 }}>
+        <Typography>{name}</Typography>
+      </Button>
+    )) || <></>;
+
+  function setTheme(theme: ITheme): void {
+    setCustomTheme(theme);
+    Object.assign(Settings.theme, theme);
     ThemeEvents.emit();
   }
 
@@ -96,250 +105,262 @@ export function ThemeEditorModal(props: IProps): React.ReactElement {
     ThemeEvents.emit();
   }
 
+  function setTemplateTheme(theme: ITheme): void {
+    setTheme(theme);
+  }
+
   return (
     <Modal open={props.open} onClose={props.onClose}>
-      <Paper>
-        <Tooltip open={true} placement={"top"} title={<Typography>Example tooltip</Typography>}>
-          <Button color="primary">primary button</Button>
-        </Tooltip>
-        <Button color="secondary">secondary button</Button>
-        <Button color="warning">warning button</Button>
-        <Button color="info">info button</Button>
-        <Button color="error">error button</Button>
-        <Button disabled>disabled button</Button>
-        <Typography color="primary">text with primary color</Typography>
-        <Typography color="secondary">text with secondary color</Typography>
-        <Typography color="error">text with error color</Typography>
-        <TextField value={"Text field"} />
+      <Paper sx={{ px: 1, py: 1, my: 1 }}>
+          <Tooltip open={true} placement={"top"} title={<Typography>Example tooltip</Typography>}>
+            <Button color="primary" size="small">primary button</Button>
+          </Tooltip>
+          <Button color="secondary" size="small">secondary button</Button>
+          <Button color="warning" size="small">warning button</Button>
+          <Button color="info" size="small">info button</Button>
+          <Button color="error" size="small">error button</Button>
+          <Button disabled size="small">disabled button</Button>
+
+          <br />
+          <Typography color="primary" variant="caption">text with primary color</Typography>&nbsp;
+          <Typography color="secondary" variant="caption">text with secondary color</Typography>&nbsp;
+          <Typography color="error" variant="caption">text with error color</Typography>
+
+          <br />
+          <TextField value={"Text field"} size="small" />
       </Paper>
-      <br />
-      <ColorEditor
-        name="primarylight"
-        onColorChange={onColorChange}
-        color={customTheme["primarylight"]}
-        defaultColor={defaultSettings.theme["primarylight"]}
-      />
-      <ColorEditor
-        name="primary"
-        onColorChange={onColorChange}
-        color={customTheme["primary"]}
-        defaultColor={defaultSettings.theme["primary"]}
-      />
-      <ColorEditor
-        name="primarydark"
-        onColorChange={onColorChange}
-        color={customTheme["primarydark"]}
-        defaultColor={defaultSettings.theme["primarydark"]}
-      />
 
-      <br />
+      <Paper sx={{ py: 1, my: 1 }}>
+        <ColorEditor
+          name="primarylight"
+          onColorChange={onColorChange}
+          color={customTheme["primarylight"]}
+          defaultColor={defaultSettings.theme["primarylight"]}
+        />
+        <ColorEditor
+          name="primary"
+          onColorChange={onColorChange}
+          color={customTheme["primary"]}
+          defaultColor={defaultSettings.theme["primary"]}
+        />
+        <ColorEditor
+          name="primarydark"
+          onColorChange={onColorChange}
+          color={customTheme["primarydark"]}
+          defaultColor={defaultSettings.theme["primarydark"]}
+        />
 
-      <ColorEditor
-        name="successlight"
-        onColorChange={onColorChange}
-        color={customTheme["successlight"]}
-        defaultColor={defaultSettings.theme["successlight"]}
-      />
-      <ColorEditor
-        name="success"
-        onColorChange={onColorChange}
-        color={customTheme["success"]}
-        defaultColor={defaultSettings.theme["success"]}
-      />
-      <ColorEditor
-        name="successdark"
-        onColorChange={onColorChange}
-        color={customTheme["successdark"]}
-        defaultColor={defaultSettings.theme["successdark"]}
-      />
+        <br />
+        <ColorEditor
+          name="successlight"
+          onColorChange={onColorChange}
+          color={customTheme["successlight"]}
+          defaultColor={defaultSettings.theme["successlight"]}
+        />
+        <ColorEditor
+          name="success"
+          onColorChange={onColorChange}
+          color={customTheme["success"]}
+          defaultColor={defaultSettings.theme["success"]}
+        />
+        <ColorEditor
+          name="successdark"
+          onColorChange={onColorChange}
+          color={customTheme["successdark"]}
+          defaultColor={defaultSettings.theme["successdark"]}
+        />
 
-      <br />
-      <ColorEditor
-        name="errorlight"
-        onColorChange={onColorChange}
-        color={customTheme["errorlight"]}
-        defaultColor={defaultSettings.theme["errorlight"]}
-      />
-      <ColorEditor
-        name="error"
-        onColorChange={onColorChange}
-        color={customTheme["error"]}
-        defaultColor={defaultSettings.theme["error"]}
-      />
-      <ColorEditor
-        name="errordark"
-        onColorChange={onColorChange}
-        color={customTheme["errordark"]}
-        defaultColor={defaultSettings.theme["errordark"]}
-      />
+        <br />
+        <ColorEditor
+          name="errorlight"
+          onColorChange={onColorChange}
+          color={customTheme["errorlight"]}
+          defaultColor={defaultSettings.theme["errorlight"]}
+        />
+        <ColorEditor
+          name="error"
+          onColorChange={onColorChange}
+          color={customTheme["error"]}
+          defaultColor={defaultSettings.theme["error"]}
+        />
+        <ColorEditor
+          name="errordark"
+          onColorChange={onColorChange}
+          color={customTheme["errordark"]}
+          defaultColor={defaultSettings.theme["errordark"]}
+        />
 
-      <br />
-      <ColorEditor
-        name="secondarylight"
-        onColorChange={onColorChange}
-        color={customTheme["secondarylight"]}
-        defaultColor={defaultSettings.theme["secondarylight"]}
-      />
-      <ColorEditor
-        name="secondary"
-        onColorChange={onColorChange}
-        color={customTheme["secondary"]}
-        defaultColor={defaultSettings.theme["secondary"]}
-      />
-      <ColorEditor
-        name="secondarydark"
-        onColorChange={onColorChange}
-        color={customTheme["secondarydark"]}
-        defaultColor={defaultSettings.theme["secondarydark"]}
-      />
+        <br />
+        <ColorEditor
+          name="secondarylight"
+          onColorChange={onColorChange}
+          color={customTheme["secondarylight"]}
+          defaultColor={defaultSettings.theme["secondarylight"]}
+        />
+        <ColorEditor
+          name="secondary"
+          onColorChange={onColorChange}
+          color={customTheme["secondary"]}
+          defaultColor={defaultSettings.theme["secondary"]}
+        />
+        <ColorEditor
+          name="secondarydark"
+          onColorChange={onColorChange}
+          color={customTheme["secondarydark"]}
+          defaultColor={defaultSettings.theme["secondarydark"]}
+        />
 
-      <br />
-      <ColorEditor
-        name="warninglight"
-        onColorChange={onColorChange}
-        color={customTheme["warninglight"]}
-        defaultColor={defaultSettings.theme["warninglight"]}
-      />
-      <ColorEditor
-        name="warning"
-        onColorChange={onColorChange}
-        color={customTheme["warning"]}
-        defaultColor={defaultSettings.theme["warning"]}
-      />
-      <ColorEditor
-        name="warningdark"
-        onColorChange={onColorChange}
-        color={customTheme["warningdark"]}
-        defaultColor={defaultSettings.theme["warningdark"]}
-      />
+        <br />
+        <ColorEditor
+          name="warninglight"
+          onColorChange={onColorChange}
+          color={customTheme["warninglight"]}
+          defaultColor={defaultSettings.theme["warninglight"]}
+        />
+        <ColorEditor
+          name="warning"
+          onColorChange={onColorChange}
+          color={customTheme["warning"]}
+          defaultColor={defaultSettings.theme["warning"]}
+        />
+        <ColorEditor
+          name="warningdark"
+          onColorChange={onColorChange}
+          color={customTheme["warningdark"]}
+          defaultColor={defaultSettings.theme["warningdark"]}
+        />
 
-      <br />
-      <ColorEditor
-        name="infolight"
-        onColorChange={onColorChange}
-        color={customTheme["infolight"]}
-        defaultColor={defaultSettings.theme["infolight"]}
-      />
-      <ColorEditor
-        name="info"
-        onColorChange={onColorChange}
-        color={customTheme["info"]}
-        defaultColor={defaultSettings.theme["info"]}
-      />
-      <ColorEditor
-        name="infodark"
-        onColorChange={onColorChange}
-        color={customTheme["infodark"]}
-        defaultColor={defaultSettings.theme["infodark"]}
-      />
+        <br />
+        <ColorEditor
+          name="infolight"
+          onColorChange={onColorChange}
+          color={customTheme["infolight"]}
+          defaultColor={defaultSettings.theme["infolight"]}
+        />
+        <ColorEditor
+          name="info"
+          onColorChange={onColorChange}
+          color={customTheme["info"]}
+          defaultColor={defaultSettings.theme["info"]}
+        />
+        <ColorEditor
+          name="infodark"
+          onColorChange={onColorChange}
+          color={customTheme["infodark"]}
+          defaultColor={defaultSettings.theme["infodark"]}
+        />
 
-      <br />
-      <ColorEditor
-        name="welllight"
-        onColorChange={onColorChange}
-        color={customTheme["welllight"]}
-        defaultColor={defaultSettings.theme["welllight"]}
-      />
-      <ColorEditor
-        name="well"
-        onColorChange={onColorChange}
-        color={customTheme["well"]}
-        defaultColor={defaultSettings.theme["well"]}
-      />
-      <ColorEditor
-        name="white"
-        onColorChange={onColorChange}
-        color={customTheme["white"]}
-        defaultColor={defaultSettings.theme["white"]}
-      />
-      <ColorEditor
-        name="black"
-        onColorChange={onColorChange}
-        color={customTheme["black"]}
-        defaultColor={defaultSettings.theme["black"]}
-      />
-      <ColorEditor
-        name="backgroundprimary"
-        onColorChange={onColorChange}
-        color={customTheme["backgroundprimary"]}
-        defaultColor={defaultSettings.theme["backgroundprimary"]}
-      />
-      <ColorEditor
-        name="backgroundsecondary"
-        onColorChange={onColorChange}
-        color={customTheme["backgroundsecondary"]}
-        defaultColor={defaultSettings.theme["backgroundsecondary"]}
-      />
-      <ColorEditor
-        name="button"
-        onColorChange={onColorChange}
-        color={customTheme["button"]}
-        defaultColor={defaultSettings.theme["button"]}
-      />
+        <br />
+        <ColorEditor
+          name="welllight"
+          onColorChange={onColorChange}
+          color={customTheme["welllight"]}
+          defaultColor={defaultSettings.theme["welllight"]}
+        />
+        <ColorEditor
+          name="well"
+          onColorChange={onColorChange}
+          color={customTheme["well"]}
+          defaultColor={defaultSettings.theme["well"]}
+        />
+        <ColorEditor
+          name="white"
+          onColorChange={onColorChange}
+          color={customTheme["white"]}
+          defaultColor={defaultSettings.theme["white"]}
+        />
+        <ColorEditor
+          name="black"
+          onColorChange={onColorChange}
+          color={customTheme["black"]}
+          defaultColor={defaultSettings.theme["black"]}
+        />
+        <ColorEditor
+          name="backgroundprimary"
+          onColorChange={onColorChange}
+          color={customTheme["backgroundprimary"]}
+          defaultColor={defaultSettings.theme["backgroundprimary"]}
+        />
+        <ColorEditor
+          name="backgroundsecondary"
+          onColorChange={onColorChange}
+          color={customTheme["backgroundsecondary"]}
+          defaultColor={defaultSettings.theme["backgroundsecondary"]}
+        />
+        <ColorEditor
+          name="button"
+          onColorChange={onColorChange}
+          color={customTheme["button"]}
+          defaultColor={defaultSettings.theme["button"]}
+        />
 
-      <br />
-      <ColorEditor
-        name="hp"
-        onColorChange={onColorChange}
-        color={customTheme["hp"]}
-        defaultColor={defaultSettings.theme["hp"]}
-      />
-      <ColorEditor
-        name="money"
-        onColorChange={onColorChange}
-        color={customTheme["money"]}
-        defaultColor={defaultSettings.theme["money"]}
-      />
-      <ColorEditor
-        name="hack"
-        onColorChange={onColorChange}
-        color={customTheme["hack"]}
-        defaultColor={defaultSettings.theme["hack"]}
-      />
-      <ColorEditor
-        name="combat"
-        onColorChange={onColorChange}
-        color={customTheme["combat"]}
-        defaultColor={defaultSettings.theme["combat"]}
-      />
-      <ColorEditor
-        name="cha"
-        onColorChange={onColorChange}
-        color={customTheme["cha"]}
-        defaultColor={defaultSettings.theme["cha"]}
-      />
-      <ColorEditor
-        name="int"
-        onColorChange={onColorChange}
-        color={customTheme["int"]}
-        defaultColor={defaultSettings.theme["int"]}
-      />
-      <ColorEditor
-        name="rep"
-        onColorChange={onColorChange}
-        color={customTheme["rep"]}
-        defaultColor={defaultSettings.theme["rep"]}
-      />
-      <ColorEditor
-        name="disabled"
-        onColorChange={onColorChange}
-        color={customTheme["disabled"]}
-        defaultColor={defaultSettings.theme["disabled"]}
-      />
-      <br />
-      <br />
-      <TextField
-        label={"import / export theme"}
-        value={JSON.stringify(customTheme)}
-        onChange={onThemeChange}
-        InputProps={{
-          endAdornment: (
-            <IconButton onClick={resetTheme} size="large">
-              <ReplyIcon />
-            </IconButton>
-          ),
-        }}
-      />
+        <br />
+        <ColorEditor
+          name="hp"
+          onColorChange={onColorChange}
+          color={customTheme["hp"]}
+          defaultColor={defaultSettings.theme["hp"]}
+        />
+        <ColorEditor
+          name="money"
+          onColorChange={onColorChange}
+          color={customTheme["money"]}
+          defaultColor={defaultSettings.theme["money"]}
+        />
+        <ColorEditor
+          name="hack"
+          onColorChange={onColorChange}
+          color={customTheme["hack"]}
+          defaultColor={defaultSettings.theme["hack"]}
+        />
+        <ColorEditor
+          name="combat"
+          onColorChange={onColorChange}
+          color={customTheme["combat"]}
+          defaultColor={defaultSettings.theme["combat"]}
+        />
+        <ColorEditor
+          name="cha"
+          onColorChange={onColorChange}
+          color={customTheme["cha"]}
+          defaultColor={defaultSettings.theme["cha"]}
+        />
+        <ColorEditor
+          name="int"
+          onColorChange={onColorChange}
+          color={customTheme["int"]}
+          defaultColor={defaultSettings.theme["int"]}
+        />
+        <ColorEditor
+          name="rep"
+          onColorChange={onColorChange}
+          color={customTheme["rep"]}
+          defaultColor={defaultSettings.theme["rep"]}
+        />
+        <ColorEditor
+          name="disabled"
+          onColorChange={onColorChange}
+          color={customTheme["disabled"]}
+          defaultColor={defaultSettings.theme["disabled"]}
+        />
+      </Paper>
+
+      <Paper sx={{ px: 1, py: 1, my: 1 }}>
+        <TextField
+          sx={{ mb: 1 }}
+          multiline
+          fullWidth
+          maxRows={3}
+          label={"import / export theme"}
+          value={JSON.stringify(customTheme)}
+          onChange={onThemeChange}
+        />
+          <>
+            <Typography sx={{ my: 1 }}>Copy the string above if you want to backup or share your theme with others.</Typography>
+            <Typography sx={{ my: 1 }}>Use the buttons below to replace the current theme with a pre-built template</Typography>
+            {themes}
+          </>
+      </Paper>
     </Modal>
   );
 }