set disabled color

src/Settings/Settings.ts

@@ -129,6 +129,7 @@ interface IDefaultSettings {
     cha: string;
     int: string;
     rep: string;
+    disabled: string;
   };
 }
 
@@ -199,6 +200,7 @@ export const defaultSettings: IDefaultSettings = {
     cha: "#a671d1",
     int: "#6495ed",
     rep: "#faffdf",
+    disabled: "#66cfbc",
   },
 };
 
@@ -258,6 +260,7 @@ export const Settings: ISettings & ISelfInitializer & ISelfLoading = {
     cha: defaultSettings.theme.cha,
     int: defaultSettings.theme.int,
     rep: defaultSettings.theme.rep,
+    disabled: defaultSettings.theme.disabled,
   },
   init() {
     Object.assign(Settings, defaultSettings);

src/ui/React/Theme.tsx

@@ -33,6 +33,7 @@ declare module "@mui/material/styles" {
 let theme: Theme;
 
 export function refreshTheme(): void {
+  console.log(Settings.theme.disabled);
   theme = createTheme({
     colors: {
       hp: Settings.theme.hp,
@@ -73,6 +74,10 @@ export function refreshTheme(): void {
         default: Settings.theme.black,
         paper: Settings.theme.well,
       },
+      action: {
+        disabledBackground: Settings.theme.disabled,
+        disabled: Settings.theme.disabled,
+      },
     },
     typography: {
       fontFamily: "monospace",

src/ui/React/ThemeEditorModal.tsx

@@ -22,7 +22,10 @@ interface IColorEditorProps {
 }
 
 function ColorEditor({ name, onColorChange, color, defaultColor }: IColorEditorProps): React.ReactElement {
-  if (color === undefined) throw new Error("should not happen");
+  if (color === undefined) {
+    console.error(`color ${name} was undefined, reverting to default`);
+    color = defaultColor;
+  }
 
   return (
     <>
@@ -264,6 +267,12 @@ export function ThemeEditorModal(props: IProps): React.ReactElement {
         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} />