Add easily switchable predefined themes

Includes the default theme and a Monokai-ish variant

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: {
+  theme: 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;
-  };
 }
 
 /**
@@ -193,41 +159,7 @@ export const defaultSettings: IDefaultSettings = {
   SuppressTIXPopup: false,
   SuppressSavedGameToast: false,
 
-  theme: {
+  theme: defaultTheme,
-    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",
-  },
 };
 
 /**
@@ -262,41 +194,7 @@ export const Settings: ISettings & ISelfInitializer & ISelfLoading = {
   MonacoInsertSpaces: false,
   MonacoFontSize: 20,
 
-  theme: {
+  theme: { ...defaultTheme },
-    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,
-  },
   init() {
     Object.assign(Settings, defaultSettings);
   },

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',
+  }
+});

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 {
+  const predefinedThemes = getPredefinedThemes();
-    setCustomTheme({
+  const themes = predefinedThemes && Object.entries(predefinedThemes)
-      ...defaultSettings.theme,
+    .map(([name, templateTheme]) => (
-    });
+      <Button onClick={() => setTemplateTheme(templateTheme)}
-    Object.assign(Settings.theme, defaultSettings.theme);
+        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,23 +105,32 @@ 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>
+      <Paper sx={{ px: 1, py: 1, my: 1 }}>
           <Tooltip open={true} placement={"top"} title={<Typography>Example tooltip</Typography>}>
-          <Button color="primary">primary button</Button>
+            <Button color="primary" size="small">primary button</Button>
           </Tooltip>
-        <Button color="secondary">secondary button</Button>
+          <Button color="secondary" size="small">secondary button</Button>
-        <Button color="warning">warning button</Button>
+          <Button color="warning" size="small">warning button</Button>
-        <Button color="info">info button</Button>
+          <Button color="info" size="small">info button</Button>
-        <Button color="error">error button</Button>
+          <Button color="error" size="small">error button</Button>
-        <Button disabled>disabled button</Button>
+          <Button disabled size="small">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>
           <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>
+
+      <Paper sx={{ py: 1, my: 1 }}>
         <ColorEditor
           name="primarylight"
           onColorChange={onColorChange}
@@ -133,7 +151,6 @@ export function ThemeEditorModal(props: IProps): React.ReactElement {
         />
 
         <br />
-
         <ColorEditor
           name="successlight"
           onColorChange={onColorChange}
@@ -326,20 +343,24 @@ export function ThemeEditorModal(props: IProps): React.ReactElement {
           color={customTheme["disabled"]}
           defaultColor={defaultSettings.theme["disabled"]}
         />
-      <br />
+      </Paper>
-      <br />
+
+      <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}
-        InputProps={{
-          endAdornment: (
-            <IconButton onClick={resetTheme} size="large">
-              <ReplyIcon />
-            </IconButton>
-          ),
-        }}
         />
+          <>
+            <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>
   );
 }