Add material-ui-color picker in theme editor

package.json

@@ -43,6 +43,7 @@
     "jszip": "^3.7.0",
     "loader-runner": "^2.3.0",
     "loader-utils": "^1.1.0",
+    "material-ui-color": "^1.2.0",
     "mathjax-full": "^3.2.0",
     "mathjax-react": "^1.0.6",
     "memory-fs": "~0.4.1",

src/ui/React/ThemeEditorModal.tsx

@@ -6,6 +6,7 @@ import TextField from "@mui/material/TextField";
 import DoneIcon from "@mui/icons-material/Done";
 import IconButton from "@mui/material/IconButton";
 import ReplyIcon from "@mui/icons-material/Reply";
+import { Color, ColorPicker } from "material-ui-color";
 import { ThemeEvents } from "./Theme";
 import { Settings, defaultSettings } from "../../Settings/Settings";
 
@@ -30,9 +31,15 @@ function ColorEditor({ name }: { name: string }): React.ReactElement {
     setColor(defaultSettings.theme[name]);
     ThemeEvents.emit();
   }
+
   function onChange(event: React.ChangeEvent<HTMLInputElement>): void {
     setColor(event.target.value);
   }
+
+  function onColorPickerChange(newValue: Color): void {
+    setColor("#" + newValue.hex.toLowerCase());
+  }
+
   return (
     <>
       <TextField
@@ -42,6 +49,15 @@ function ColorEditor({ name }: { name: string }): React.ReactElement {
         onChange={onChange}
         variant="standard"
         InputProps={{
+          startAdornment: (
+            <>
+              <ColorPicker
+                hideTextfield
+                value={color}
+                onChange={onColorPickerChange}
+              />
+            </>
+          ),
           endAdornment: (
             <>
               <IconButton onClick={set} disabled={!valid}>