Merge pull request #1450 from danielyxie/dev

Added kindof monokai to monaco

src/ScriptEditor/ui/OptionsModal.tsx

@@ -44,6 +44,7 @@ export function OptionsModal(props: IProps): React.ReactElement {
         <Select onChange={(event) => setTheme(event.target.value)} defaultValue={props.options.theme}>
           <MenuItem value="vs-dark">dark</MenuItem>
           <MenuItem value="light">light</MenuItem>
+          <MenuItem value="monokai">monokai</MenuItem>
         </Select>
       </Box>
 

src/ScriptEditor/ui/ScriptEditorRoot.tsx

@@ -29,6 +29,7 @@ import Box from "@mui/material/Box";
 import TextField from "@mui/material/TextField";
 import IconButton from "@mui/material/IconButton";
 import SettingsIcon from "@mui/icons-material/Settings";
+import { loadThemes } from "./themes";
 
 let symbols: string[] = [];
 export function SetupTextEditor(): void {
@@ -291,6 +292,7 @@ export function Root(props: IProps): React.ReactElement {
     });
     monaco.languages.typescript.javascriptDefaults.addExtraLib(libSource, "netscript.d.ts");
     monaco.languages.typescript.typescriptDefaults.addExtraLib(libSource, "netscript.d.ts");
+    loadThemes(monaco);
   }
 
   return (
@@ -315,7 +317,7 @@ export function Root(props: IProps): React.ReactElement {
         onMount={onMount}
         loading={<Typography>Loading script editor!</Typography>}
         height="90%"
-        defaultLanguage="javascript"
+        language="javascript"
         defaultValue={code}
         onChange={updateCode}
         theme={options.theme}

src/ScriptEditor/ui/themes.ts

@@ -0,0 +1,51 @@
+export async function loadThemes(monaco: any): Promise<void> {
+  monaco.editor.defineTheme("monokai", {
+    base: "vs-dark",
+    inherit: true,
+    rules: [
+      {
+        background: "272822",
+        token: "",
+      },
+      {
+        foreground: "75715e",
+        token: "comment",
+      },
+      {
+        foreground: "e6db74",
+        token: "string",
+      },
+      {
+        token: "number",
+        foreground: "ae81ff",
+      },
+      {
+        foreground: "ae81ff",
+        token: "function",
+      },
+      {
+        foreground: "f92672",
+        token: "keyword",
+      },
+      {
+        token: "storage.type.function.js",
+        foreground: "ae81ff",
+      },
+
+      //   {
+      //     foreground: "ae81ff",
+      //     token: "entity.name.function",
+      //   },
+    ],
+    colors: {
+      "editor.foreground": "#F8F8F2",
+      "editor.background": "#272822",
+      "editor.selectionBackground": "#49483E",
+      "editor.lineHighlightBackground": "#3E3D32",
+      "editorCursor.foreground": "#F8F8F0",
+      "editorWhitespace.foreground": "#3B3A32",
+      "editorIndentGuide.activeBackground": "#9D550FB0",
+      "editor.selectionHighlightBorder": "#222218",
+    },
+  });
+}