diff --git a/client/public/themes/Amy.json b/client/public/themes/Amy.json
new file mode 100644
index 00000000..fe40f8e9
--- /dev/null
+++ b/client/public/themes/Amy.json
@@ -0,0 +1,191 @@
+{
+  "base": "vs-dark",
+  "inherit": true,
+  "rules": [
+    {
+      "background": "200020",
+      "token": ""
+    },
+    {
+      "foreground": "404080",
+      "background": "200020",
+      "fontStyle": "italic",
+      "token": "comment.block"
+    },
+    {
+      "foreground": "999999",
+      "token": "string"
+    },
+    {
+      "foreground": "707090",
+      "token": "constant.language"
+    },
+    {
+      "foreground": "7090b0",
+      "token": "constant.numeric"
+    },
+    {
+      "fontStyle": "bold",
+      "token": "constant.numeric.integer.int32"
+    },
+    {
+      "fontStyle": "italic",
+      "token": "constant.numeric.integer.int64"
+    },
+    {
+      "fontStyle": "bold italic",
+      "token": "constant.numeric.integer.nativeint"
+    },
+    {
+      "fontStyle": "underline",
+      "token": "constant.numeric.floating-point.ocaml"
+    },
+    {
+      "foreground": "666666",
+      "token": "constant.character"
+    },
+    {
+      "foreground": "8080a0",
+      "token": "constant.language.boolean"
+    },
+    {
+      "foreground": "008080",
+      "token": "variable.language"
+    },
+    {
+      "foreground": "008080",
+      "token": "variable.other"
+    },
+    {
+      "foreground": "a080ff",
+      "token": "keyword"
+    },
+    {
+      "foreground": "a0a0ff",
+      "token": "keyword.operator"
+    },
+    {
+      "foreground": "d0d0ff",
+      "token": "keyword.other.decorator"
+    },
+    {
+      "fontStyle": "underline",
+      "token": "keyword.operator.infix.floating-point.ocaml"
+    },
+    {
+      "fontStyle": "underline",
+      "token": "keyword.operator.prefix.floating-point.ocaml"
+    },
+    {
+      "foreground": "c080c0",
+      "token": "keyword.other.directive"
+    },
+    {
+      "foreground": "c080c0",
+      "fontStyle": "underline",
+      "token": "keyword.other.directive.line-number"
+    },
+    {
+      "foreground": "80a0ff",
+      "token": "keyword.control"
+    },
+    {
+      "foreground": "b0fff0",
+      "token": "storage"
+    },
+    {
+      "foreground": "60b0ff",
+      "token": "entity.name.type.variant"
+    },
+    {
+      "foreground": "60b0ff",
+      "fontStyle": "italic",
+      "token": "storage.type.variant.polymorphic"
+    },
+    {
+      "foreground": "60b0ff",
+      "fontStyle": "italic",
+      "token": "entity.name.type.variant.polymorphic"
+    },
+    {
+      "foreground": "b000b0",
+      "token": "entity.name.type.module"
+    },
+    {
+      "foreground": "b000b0",
+      "fontStyle": "underline",
+      "token": "entity.name.type.module-type.ocaml"
+    },
+    {
+      "foreground": "a00050",
+      "token": "support.other"
+    },
+    {
+      "foreground": "70e080",
+      "token": "entity.name.type.class"
+    },
+    {
+      "foreground": "70e0a0",
+      "token": "entity.name.type.class-type"
+    },
+    {
+      "foreground": "50a0a0",
+      "token": "entity.name.function"
+    },
+    {
+      "foreground": "80b0b0",
+      "token": "variable.parameter"
+    },
+    {
+      "foreground": "3080a0",
+      "token": "entity.name.type.token"
+    },
+    {
+      "foreground": "3cb0d0",
+      "token": "entity.name.type.token.reference"
+    },
+    {
+      "foreground": "90e0e0",
+      "token": "entity.name.function.non-terminal"
+    },
+    {
+      "foreground": "c0f0f0",
+      "token": "entity.name.function.non-terminal.reference"
+    },
+    {
+      "foreground": "009090",
+      "token": "entity.name.tag"
+    },
+    {
+      "background": "200020",
+      "token": "support.constant"
+    },
+    {
+      "foreground": "400080",
+      "background": "ffff00",
+      "fontStyle": "bold",
+      "token": "invalid.illegal"
+    },
+    {
+      "foreground": "200020",
+      "background": "cc66ff",
+      "token": "invalid.deprecated"
+    },
+    {
+      "background": "40008054",
+      "token": "source.camlp4.embedded"
+    },
+    {
+      "foreground": "805080",
+      "token": "punctuation"
+    }
+  ],
+  "colors": {
+    "editor.foreground": "#D0D0FF",
+    "editor.background": "#200020",
+    "editor.selectionBackground": "#80000080",
+    "editor.lineHighlightBackground": "#80000040",
+    "editorCursor.foreground": "#7070FF",
+    "editorWhitespace.foreground": "#BFBFBF"
+  }
+}
\ No newline at end of file
diff --git a/client/public/themes/Cobalt.json b/client/public/themes/Cobalt.json
new file mode 100644
index 00000000..c2571567
--- /dev/null
+++ b/client/public/themes/Cobalt.json
@@ -0,0 +1,253 @@
+{
+  "base": "vs-dark",
+  "inherit": true,
+  "rules": [
+    {
+      "background": "002240",
+      "token": ""
+    },
+    {
+      "foreground": "e1efff",
+      "token": "punctuation - (punctuation.definition.string || punctuation.definition.comment)"
+    },
+    {
+      "foreground": "ff628c",
+      "token": "constant"
+    },
+    {
+      "foreground": "ffdd00",
+      "token": "entity"
+    },
+    {
+      "foreground": "ff9d00",
+      "token": "keyword"
+    },
+    {
+      "foreground": "ffee80",
+      "token": "storage"
+    },
+    {
+      "foreground": "3ad900",
+      "token": "string -string.unquoted.old-plist -string.unquoted.heredoc"
+    },
+    {
+      "foreground": "3ad900",
+      "token": "string.unquoted.heredoc string"
+    },
+    {
+      "foreground": "0088ff",
+      "fontStyle": "italic",
+      "token": "comment"
+    },
+    {
+      "foreground": "80ffbb",
+      "token": "support"
+    },
+    {
+      "foreground": "cccccc",
+      "token": "variable"
+    },
+    {
+      "foreground": "ff80e1",
+      "token": "variable.language"
+    },
+    {
+      "foreground": "ffee80",
+      "token": "meta.function-call"
+    },
+    {
+      "foreground": "f8f8f8",
+      "background": "800f00",
+      "token": "invalid"
+    },
+    {
+      "foreground": "ffffff",
+      "background": "223545",
+      "token": "text source"
+    },
+    {
+      "foreground": "ffffff",
+      "background": "223545",
+      "token": "string.unquoted.heredoc"
+    },
+    {
+      "foreground": "ffffff",
+      "background": "223545",
+      "token": "source source"
+    },
+    {
+      "foreground": "80fcff",
+      "fontStyle": "italic",
+      "token": "entity.other.inherited-class"
+    },
+    {
+      "foreground": "9eff80",
+      "token": "string.quoted source"
+    },
+    {
+      "foreground": "80ff82",
+      "token": "string constant"
+    },
+    {
+      "foreground": "80ffc2",
+      "token": "string.regexp"
+    },
+    {
+      "foreground": "edef7d",
+      "token": "string variable"
+    },
+    {
+      "foreground": "ffb054",
+      "token": "support.function"
+    },
+    {
+      "foreground": "eb939a",
+      "token": "support.constant"
+    },
+    {
+      "foreground": "ff1e00",
+      "token": "support.type.exception"
+    },
+    {
+      "foreground": "8996a8",
+      "token": "meta.preprocessor.c"
+    },
+    {
+      "foreground": "afc4db",
+      "token": "meta.preprocessor.c keyword"
+    },
+    {
+      "foreground": "73817d",
+      "token": "meta.sgml.html meta.doctype"
+    },
+    {
+      "foreground": "73817d",
+      "token": "meta.sgml.html meta.doctype entity"
+    },
+    {
+      "foreground": "73817d",
+      "token": "meta.sgml.html meta.doctype string"
+    },
+    {
+      "foreground": "73817d",
+      "token": "meta.xml-processing"
+    },
+    {
+      "foreground": "73817d",
+      "token": "meta.xml-processing entity"
+    },
+    {
+      "foreground": "73817d",
+      "token": "meta.xml-processing string"
+    },
+    {
+      "foreground": "9effff",
+      "token": "meta.tag"
+    },
+    {
+      "foreground": "9effff",
+      "token": "meta.tag entity"
+    },
+    {
+      "foreground": "9effff",
+      "token": "meta.selector.css entity.name.tag"
+    },
+    {
+      "foreground": "ffb454",
+      "token": "meta.selector.css entity.other.attribute-name.id"
+    },
+    {
+      "foreground": "5fe461",
+      "token": "meta.selector.css entity.other.attribute-name.class"
+    },
+    {
+      "foreground": "9df39f",
+      "token": "support.type.property-name.css"
+    },
+    {
+      "foreground": "f6f080",
+      "token": "meta.property-group support.constant.property-value.css"
+    },
+    {
+      "foreground": "f6f080",
+      "token": "meta.property-value support.constant.property-value.css"
+    },
+    {
+      "foreground": "f6aa11",
+      "token": "meta.preprocessor.at-rule keyword.control.at-rule"
+    },
+    {
+      "foreground": "edf080",
+      "token": "meta.property-value support.constant.named-color.css"
+    },
+    {
+      "foreground": "edf080",
+      "token": "meta.property-value constant"
+    },
+    {
+      "foreground": "eb939a",
+      "token": "meta.constructor.argument.css"
+    },
+    {
+      "foreground": "f8f8f8",
+      "background": "000e1a",
+      "token": "meta.diff"
+    },
+    {
+      "foreground": "f8f8f8",
+      "background": "000e1a",
+      "token": "meta.diff.header"
+    },
+    {
+      "foreground": "f8f8f8",
+      "background": "4c0900",
+      "token": "markup.deleted"
+    },
+    {
+      "foreground": "f8f8f8",
+      "background": "806f00",
+      "token": "markup.changed"
+    },
+    {
+      "foreground": "f8f8f8",
+      "background": "154f00",
+      "token": "markup.inserted"
+    },
+    {
+      "background": "8fddf630",
+      "token": "markup.raw"
+    },
+    {
+      "background": "004480",
+      "token": "markup.quote"
+    },
+    {
+      "background": "130d26",
+      "token": "markup.list"
+    },
+    {
+      "foreground": "c1afff",
+      "fontStyle": "bold",
+      "token": "markup.bold"
+    },
+    {
+      "foreground": "b8ffd9",
+      "fontStyle": "italic",
+      "token": "markup.italic"
+    },
+    {
+      "foreground": "c8e4fd",
+      "background": "001221",
+      "fontStyle": "bold",
+      "token": "markup.heading"
+    }
+  ],
+  "colors": {
+    "editor.foreground": "#FFFFFF",
+    "editor.background": "#002240",
+    "editor.selectionBackground": "#B36539BF",
+    "editor.lineHighlightBackground": "#00000059",
+    "editorCursor.foreground": "#FFFFFF",
+    "editorWhitespace.foreground": "#FFFFFF26"
+  }
+}
\ No newline at end of file
diff --git a/client/public/themes/GithubDark.json b/client/public/themes/GithubDark.json
new file mode 100644
index 00000000..fa0688df
--- /dev/null
+++ b/client/public/themes/GithubDark.json
@@ -0,0 +1,349 @@
+
+{
+  "base": "vs-dark",
+  "inherit": true,
+  "rules": [
+    {
+      "background": "24292e",
+      "token": ""
+    },
+    {
+      "foreground": "959da5",
+      "token": "comment"
+    },
+    {
+      "foreground": "959da5",
+      "token": "punctuation.definition.comment"
+    },
+    {
+      "foreground": "959da5",
+      "token": "string.comment"
+    },
+    {
+      "foreground": "c8e1ff",
+      "token": "constant"
+    },
+    {
+      "foreground": "c8e1ff",
+      "token": "entity.name.constant"
+    },
+    {
+      "foreground": "c8e1ff",
+      "token": "variable.other.constant"
+    },
+    {
+      "foreground": "c8e1ff",
+      "token": "variable.language"
+    },
+    {
+      "foreground": "b392f0",
+      "token": "entity"
+    },
+    {
+      "foreground": "b392f0",
+      "token": "entity.name"
+    },
+    {
+      "foreground": "f6f8fa",
+      "token": "variable.parameter.function"
+    },
+    {
+      "foreground": "7bcc72",
+      "token": "entity.name.tag"
+    },
+    {
+      "foreground": "ea4a5a",
+      "token": "keyword"
+    },
+    {
+      "foreground": "ea4a5a",
+      "token": "storage"
+    },
+    {
+      "foreground": "ea4a5a",
+      "token": "storage.type"
+    },
+    {
+      "foreground": "f6f8fa",
+      "token": "storage.modifier.package"
+    },
+    {
+      "foreground": "f6f8fa",
+      "token": "storage.modifier.import"
+    },
+    {
+      "foreground": "f6f8fa",
+      "token": "storage.type.java"
+    },
+    {
+      "foreground": "79b8ff",
+      "token": "string"
+    },
+    {
+      "foreground": "79b8ff",
+      "token": "punctuation.definition.string"
+    },
+    {
+      "foreground": "79b8ff",
+      "token": "string punctuation.section.embedded source"
+    },
+    {
+      "foreground": "c8e1ff",
+      "token": "support"
+    },
+    {
+      "foreground": "c8e1ff",
+      "token": "meta.property-name"
+    },
+    {
+      "foreground": "fb8532",
+      "token": "variable"
+    },
+    {
+      "foreground": "f6f8fa",
+      "token": "variable.other"
+    },
+    {
+      "foreground": "d73a49",
+      "fontStyle": "bold italic underline",
+      "token": "invalid.broken"
+    },
+    {
+      "foreground": "d73a49",
+      "fontStyle": "bold italic underline",
+      "token": "invalid.deprecated"
+    },
+    {
+      "foreground": "fafbfc",
+      "background": "d73a49",
+      "fontStyle": "italic underline",
+      "token": "invalid.illegal"
+    },
+    {
+      "foreground": "fafbfc",
+      "background": "d73a49",
+      "fontStyle": "italic underline",
+      "token": "carriage-return"
+    },
+    {
+      "foreground": "d73a49",
+      "fontStyle": "bold italic underline",
+      "token": "invalid.unimplemented"
+    },
+    {
+      "foreground": "d73a49",
+      "token": "message.error"
+    },
+    {
+      "foreground": "f6f8fa",
+      "token": "string source"
+    },
+    {
+      "foreground": "c8e1ff",
+      "token": "string variable"
+    },
+    {
+      "foreground": "79b8ff",
+      "token": "source.regexp"
+    },
+    {
+      "foreground": "79b8ff",
+      "token": "string.regexp"
+    },
+    {
+      "foreground": "79b8ff",
+      "token": "string.regexp.character-class"
+    },
+    {
+      "foreground": "79b8ff",
+      "token": "string.regexp constant.character.escape"
+    },
+    {
+      "foreground": "79b8ff",
+      "token": "string.regexp source.ruby.embedded"
+    },
+    {
+      "foreground": "79b8ff",
+      "token": "string.regexp string.regexp.arbitrary-repitition"
+    },
+    {
+      "foreground": "7bcc72",
+      "fontStyle": "bold",
+      "token": "string.regexp constant.character.escape"
+    },
+    {
+      "foreground": "c8e1ff",
+      "token": "support.constant"
+    },
+    {
+      "foreground": "c8e1ff",
+      "token": "support.variable"
+    },
+    {
+      "foreground": "c8e1ff",
+      "token": "meta.module-reference"
+    },
+    {
+      "foreground": "fb8532",
+      "token": "markup.list"
+    },
+    {
+      "foreground": "0366d6",
+      "fontStyle": "bold",
+      "token": "markup.heading"
+    },
+    {
+      "foreground": "0366d6",
+      "fontStyle": "bold",
+      "token": "markup.heading entity.name"
+    },
+    {
+      "foreground": "c8e1ff",
+      "token": "markup.quote"
+    },
+    {
+      "foreground": "f6f8fa",
+      "fontStyle": "italic",
+      "token": "markup.italic"
+    },
+    {
+      "foreground": "f6f8fa",
+      "fontStyle": "bold",
+      "token": "markup.bold"
+    },
+    {
+      "foreground": "c8e1ff",
+      "token": "markup.raw"
+    },
+    {
+      "foreground": "b31d28",
+      "background": "ffeef0",
+      "token": "markup.deleted"
+    },
+    {
+      "foreground": "b31d28",
+      "background": "ffeef0",
+      "token": "meta.diff.header.from-file"
+    },
+    {
+      "foreground": "b31d28",
+      "background": "ffeef0",
+      "token": "punctuation.definition.deleted"
+    },
+    {
+      "foreground": "176f2c",
+      "background": "f0fff4",
+      "token": "markup.inserted"
+    },
+    {
+      "foreground": "176f2c",
+      "background": "f0fff4",
+      "token": "meta.diff.header.to-file"
+    },
+    {
+      "foreground": "176f2c",
+      "background": "f0fff4",
+      "token": "punctuation.definition.inserted"
+    },
+    {
+      "foreground": "b08800",
+      "background": "fffdef",
+      "token": "markup.changed"
+    },
+    {
+      "foreground": "b08800",
+      "background": "fffdef",
+      "token": "punctuation.definition.changed"
+    },
+    {
+      "foreground": "2f363d",
+      "background": "959da5",
+      "token": "markup.ignored"
+    },
+    {
+      "foreground": "2f363d",
+      "background": "959da5",
+      "token": "markup.untracked"
+    },
+    {
+      "foreground": "b392f0",
+      "fontStyle": "bold",
+      "token": "meta.diff.range"
+    },
+    {
+      "foreground": "c8e1ff",
+      "token": "meta.diff.header"
+    },
+    {
+      "foreground": "0366d6",
+      "fontStyle": "bold",
+      "token": "meta.separator"
+    },
+    {
+      "foreground": "0366d6",
+      "token": "meta.output"
+    },
+    {
+      "foreground": "ffeef0",
+      "token": "brackethighlighter.tag"
+    },
+    {
+      "foreground": "ffeef0",
+      "token": "brackethighlighter.curly"
+    },
+    {
+      "foreground": "ffeef0",
+      "token": "brackethighlighter.round"
+    },
+    {
+      "foreground": "ffeef0",
+      "token": "brackethighlighter.square"
+    },
+    {
+      "foreground": "ffeef0",
+      "token": "brackethighlighter.angle"
+    },
+    {
+      "foreground": "ffeef0",
+      "token": "brackethighlighter.quote"
+    },
+    {
+      "foreground": "d73a49",
+      "token": "brackethighlighter.unmatched"
+    },
+    {
+      "foreground": "d73a49",
+      "token": "sublimelinter.mark.error"
+    },
+    {
+      "foreground": "fb8532",
+      "token": "sublimelinter.mark.warning"
+    },
+    {
+      "foreground": "6a737d",
+      "token": "sublimelinter.gutter-mark"
+    },
+    {
+      "foreground": "79b8ff",
+      "fontStyle": "underline",
+      "token": "constant.other.reference.link"
+    },
+    {
+      "foreground": "79b8ff",
+      "fontStyle": "underline",
+      "token": "string.other.link"
+    }
+  ],
+  "colors": {
+    "editor.foreground": "#f6f8fa",
+    "editor.background": "#24292e",
+    "editor.selectionBackground": "#4c2889",
+    "editor.inactiveSelectionBackground": "#444d56",
+    "editor.lineHighlightBackground": "#444d56",
+    "editorCursor.foreground": "#ffffff",
+    "editorWhitespace.foreground": "#6a737d",
+    "editorIndentGuide.background": "#6a737d",
+    "editorIndentGuide.activeBackground": "#f6f8fa",
+    "editor.selectionHighlightBorder": "#444d56"
+  }
+}
diff --git a/client/public/themes/README.md b/client/public/themes/README.md
new file mode 100644
index 00000000..2e05160e
--- /dev/null
+++ b/client/public/themes/README.md
@@ -0,0 +1,23 @@
+# Themes
+
+You can use monaco themes to style the lean webeditor. Take a look at these
+[sample monaco themes](https://github.com/brijeshb42/monaco-themes/tree/master/themes).
+
+To add a theme, you need two steps:
+
+1. Add the json file here (in the `themes` folder)
+2. Add an `option` to the `select` in `Settings.tsx`. Make sure that the `value` of the `option` matches the filename (without '.json')!
+
+Now you can select the theme from the Settings.
+
+## Used variables
+
+Here is a list of some variables from the theme which are used for the editor interface:
+
+* The top bar and menu use the `--vscode-menu-XXX` variables.
+* The pop-ups (loading, settings, etc.) use `--vscode-input-XXX` and `--vscode-button-XXX`
+* `--vscode-textPreformat-foreground` is used for code in pop-ups.
+* `--vscode-textLink-foreground` is used for links in pop-ups.
+* `--vscode-editorError-foreground` is used for error message in pop-ups.
+* `--vscode-background` is used for the website's background.
+* `--vscode-inputOption-activeForeground` and `--vscode-widget-shadow` are also used.
diff --git a/client/src/css/theme/lightPlus.json b/client/public/themes/lightPlus.json
similarity index 100%
rename from client/src/css/theme/lightPlus.json
rename to client/public/themes/lightPlus.json
diff --git a/client/src/App.tsx b/client/src/App.tsx
index f793aaea..17d941ff 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react'
 import { useState, Suspense, useEffect } from 'react'
-import './editor/vscode.css'
 import './css/App.css'
-import './css/dark-theme.css'
+import './css/Topbar.css'
+import './css/Modal.css'
+//import './css/dark-theme.css'
 import PrivacyPolicy from './PrivacyPolicy'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faArrowRotateRight, faArrowUpRightFromSquare, faDownload, faBars, faXmark } from '@fortawesome/free-solid-svg-icons'
@@ -14,7 +15,8 @@ import Tools from './Tools'
 import Examples from './Examples'
 import LoadingMenu from './LoadingMenu'
 import { config } from './config/config'
-
+import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'
+import { monacoSetup } from './monacoSetup'
 
 const App: React.FC = () => {
   const [restart, setRestart] = useState()
@@ -25,6 +27,7 @@ const App: React.FC = () => {
 
   // Open a submenu. We manage submenus here so that only one submenu can be open at any time.
   const [submenu, setSubmenu] = useState<React.JSX.Element>(null)
+
   function openSubmenu(ev: React.MouseEvent, component: React.JSX.Element) {
     setNavOpen(true)
     setSubmenu(component)
@@ -60,8 +63,9 @@ const App: React.FC = () => {
     })
   }, [])
 
-  const isBrowserDefaultDark = () => window.matchMedia('(prefers-color-scheme: dark)').matches;
-  const [theme, setTheme] = React.useState(isBrowserDefaultDark() ? 'dark' : 'light')
+  /* Option to change themes */
+  const isBrowserDefaultDark = () => window.matchMedia('(prefers-color-scheme: dark)').matches
+  const [theme, setTheme] = React.useState(isBrowserDefaultDark() ? 'GithubDark' : 'lightPlus')
 
   const [content, setContent] = useState<string>('')
   const [url, setUrl] = useState<string>(null)
@@ -126,17 +130,20 @@ const App: React.FC = () => {
   }
 
   return (
-    <div className={`app ${theme}-theme`}>
+    <div className={'app monaco-editor'}>
       <div className='nav'>
         <Logo className='logo' />
-        <div className='menu-wrapper' ref={menuRef}>
+        <div className='menu' ref={menuRef}>
           {!config.verticalLayout && <>
             {/* Buttons for desktop version */}
             <Examples loadFromUrl={loadFromUrl} openSubmenu={openSubmenu} closeNav={closeNav}/>
             <LoadingMenu loadFromUrl={loadFromUrl} setContent={setContent} openSubmenu={openSubmenu} closeNav={closeNav}/>
           </>
           }
-          <div className={'menu dropdown' + (navOpen ? '' : ' hidden')}>
+          <span className={"nav-link nav-icon"} onClick={(ev) => {setNavOpen(!navOpen)}}>
+            {navOpen ? <FontAwesomeIcon icon={faXmark} /> : <FontAwesomeIcon icon={faBars} />}
+          </span>
+          <div className={'dropdown' + (navOpen ? '' : ' hidden')}>
             {config.verticalLayout && <>
               {/* Buttons for mobile version */}
               <Examples loadFromUrl={loadFromUrl} openSubmenu={openSubmenu} closeNav={closeNav}/>
@@ -160,18 +167,15 @@ const App: React.FC = () => {
             <a className="nav-link" href="https://github.com/hhu-adam/lean4web" target="_blank">
               <FontAwesomeIcon icon={faArrowUpRightFromSquare} /> GitHub
             </a>
-            <div className="dropdown-menu" ref={submenuRef}>
+            <div className="submenu" ref={submenuRef}>
               {submenu && submenu}
             </div>
           </div>
-          <div className={"nav-icon"} onClick={(ev) => {setNavOpen(!navOpen)}}>
-            {navOpen ? <FontAwesomeIcon icon={faXmark} /> : <FontAwesomeIcon icon={faBars} />}
-          </div>
         </div>
       </div>
       <Suspense fallback={<div className="loading-ring"></div>}>
         <Editor setRestart={setRestart}
-          value={content} onDidChangeContent={onDidChangeContent} />
+          value={content} onDidChangeContent={onDidChangeContent} theme={theme}/>
       </Suspense>
     </div>
   )
diff --git a/client/src/Editor.tsx b/client/src/Editor.tsx
index 6fbf4428..33077384 100644
--- a/client/src/Editor.tsx
+++ b/client/src/Editor.tsx
@@ -2,7 +2,6 @@ import * as React from 'react'
 import { useEffect, useRef, useState } from 'react'
 import './css/Editor.css'
 import './editor/infoview.css'
-import './editor/vscode.css'
 import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js'
 import { loadRenderInfoview } from '@leanprover/infoview/loader'
 import { InfoviewApi } from '@leanprover/infoview-api'
@@ -20,8 +19,8 @@ const socketUrl = ((window.location.protocol === "https:") ? "wss://" : "ws://")
 
 monacoSetup()
 
-const Editor: React.FC<{setRestart?, onDidChangeContent?, value: string}> =
-    ({setRestart, onDidChangeContent, value}) => {
+const Editor: React.FC<{setRestart?, onDidChangeContent?, value: string, theme: string}> =
+    ({setRestart, onDidChangeContent, value, theme}) => {
   const uri = monaco.Uri.parse('file:///LeanProject/LeanProject.lean')
   const [editor, setEditor] = useState<monaco.editor.IStandaloneCodeEditor | null>(null)
   // const [editorApi, setEditorApi] = useState<MyEditorApi | null>(null)
@@ -32,6 +31,23 @@ const Editor: React.FC<{setRestart?, onDidChangeContent?, value: string}> =
   const [dragging, setDragging] = useState<boolean | null>(false)
   const [restartMessage, setRestartMessage] = useState<boolean | null>(false)
 
+  useEffect(() => {
+    //monaco.editor.setTheme(theme)
+    fetch(`./themes/${theme}.json`,{
+      headers : {
+        'Content-Type': 'application/json',
+        'Accept': 'application/json'
+       }
+    })
+    .then(response => response.json())
+    .then(themeJson => {
+      monaco.editor.defineTheme('usedTheme', themeJson as any);
+      monaco.editor.setTheme('usedTheme')
+      console.log(`changed theme to ${theme}`)
+    })
+  }, [theme])
+
+
   useEffect(() => {
     const model = monaco.editor.getModel(uri) ??
       monaco.editor.createModel(value ?? '', 'lean4', uri)
@@ -59,7 +75,7 @@ const Editor: React.FC<{setRestart?, onDidChangeContent?, value: string}> =
         },
         tabSize: 2,
         'semanticHighlighting.enabled': true,
-        theme: 'vs-code-theme-converted'
+        theme: 'vs'
       })
       setEditor(editor)
       new AbbreviationRewriter(new AbbreviationProvider(), model, editor)
diff --git a/client/src/Settings.tsx b/client/src/Settings.tsx
index d9190215..dec255d1 100644
--- a/client/src/Settings.tsx
+++ b/client/src/Settings.tsx
@@ -4,7 +4,9 @@ import { config } from './config/config';
 import * as React from 'react'
 import { useEffect } from 'react'
 import Switch from '@mui/material/Switch';
+import Select from '@mui/material/Select';
 import { useWindowDimensions } from './window_width';
+import { FormControl, InputLabel, MenuItem } from '@mui/material';
 
 const Settings: React.FC<{closeNav, theme, setTheme}> =
     ({closeNav, theme, setTheme}) => {
@@ -73,14 +75,6 @@ const Settings: React.FC<{closeNav, theme, setTheme}> =
   //  ev.stopPropagation()
   }
 
-  const handleThemeChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
-    if (theme == 'dark') {
-      setTheme('light')
-    } else {
-      setTheme('dark')
-    }
-  }
-
   return <>
     <span className="nav-link" onClick={handleOpen}>
       <FontAwesomeIcon icon={faGear} /> Settings
@@ -98,16 +92,27 @@ const Settings: React.FC<{closeNav, theme, setTheme}> =
                 onChange={(ev) => {setAbbreviationCharacter(ev.target.value)}} value={abbreviationCharacter} />
             </p>
             <p>
-              <Switch id="verticalLayout" onChange={handleLayoutChange} checked={verticalLayout} />
-              <label htmlFor="verticalLayout">Mobile layout (vertical)</label>
+              <label htmlFor="theme">Theme: </label>
+              <select
+                  id="theme"
+                  name="theme"
+                  value={theme}
+                  onChange={(ev) => {setTheme(ev.target.value)}} >
+                <option value="lightPlus">light+</option>
+                <option value="GithubDark">github dark</option>
+                <option value="Amy">amy</option>
+                <option value="Cobalt">cobalt</option>
+              </select>
             </p>
             <p>
-              <Switch id="theme" onChange={handleThemeChange} checked={theme == 'dark'} />
-              <label htmlFor="theme">Dark theme</label>
+              <Switch id="verticalLayout" onChange={handleLayoutChange} checked={verticalLayout} />
+              <label htmlFor="verticalLayout">Mobile layout (vertical)</label>
             </p>
             <p>
               <Switch id="savingAllowed" onChange={handleChangeSaving} checked={savingAllowed} />
               <label htmlFor="savingAllowed">Save my settings (in the browser store)</label>
+            </p>
+            <p>
               <input type="submit" value="OK" />
             </p>
           </form>
diff --git a/client/src/css/App.css b/client/src/css/App.css
index 5e8d5538..68d7f1f5 100644
--- a/client/src/css/App.css
+++ b/client/src/css/App.css
@@ -1,14 +1,16 @@
 
-/* hack to prevent white flashing on loading in dark mode. */
+
+/* hack to prevent white flashing on loading in dark mode.
+TODO: doesnt work for me. */
 @media (prefers-color-scheme: dark) {
   .app {
-    background-color: #2B2B2B;
+    /* note: vscode theme not loaded yet, don't use `--vscode-XXX` variables */
+    background-color: #2B2B2B; /* TODO */
   }
 }
 
-/* hack to prevent white flashing on loading in dark mode. */
-.app.light-theme {
-  background-color: #fff;
+.app {
+  background-color: var(--vscode-background);
 }
 
 .app {
@@ -17,200 +19,13 @@
   height: 100%;
 }
 
-.editor-wrapper {
-  flex: 1;
-  min-height: 0;
-  padding-top: .5rem;
-}
-
-.nav {
-  box-shadow: 0 .3rem .3rem 0 rgba(0, 0, 0, 0.1);
-  background-color: var(--vscode-breadcrumb-background);
-  color: var(--vscode-breadcrumb-foreground);
-  z-index: 1;
-  position: relative;
-}
-
-
-/* The Lean logo */
-.nav .logo {
-  height: 2.2rem;
-  width: unset;
-  vertical-align: middle;
-  margin-left: .5rem;
-  margin-right: 1rem;
-}
-
-/* `nav-icon` is the menu item to toggle the dropdown */
-.nav-icon {
-  background: none;
-  border: none;
-  color: inherit;
-  cursor: pointer;
-  text-decoration: none;
-  padding: .5rem;
-  height: 100%;
-  float: right;
-  padding-right: 1rem;
-}
-
-.menu-wrapper {
-  float: right;
-}
-
-/* Wrapper for the menu items */
-.nav .menu {
-  background: none;
-  border: none;
-  display: inline-block;
-}
-
-/* Wrapper if menu is dropdown */
-.nav .menu.dropdown {
-  position: absolute;
-  display: flex;
-  flex-direction: column;
-  right: 0;
-  top: 2.2rem;
-  background-color: #fff;
-  z-index: 1;
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  box-shadow: -.1rem .3rem .3rem 0 rgba(0, 0, 0, 0.1);
-}
-
-
-/* The menu items */
-.nav .nav-link {
-  background: none;
-  border: none;
-  color: inherit;
-  cursor: pointer;
-  text-decoration: none;
-  padding: .5rem;
-  display: inline-block;
-}
-
-/* menu items for dropdown */
-.nav .dropdown .nav-link {
-  /* width: 100%; */
-  padding-left: .8rem;
-  padding-right: .8rem;
-  padding-top: .6rem;
-  padding-bottom: .6rem;
-}
-
-.nav .nav-link:hover {
-  color: var(--vscode-breadcrumb-focusForeground);
-  background-color: #f9f9f9;
-}
-
-.nav-icon:hover {
-  color: var(--vscode-breadcrumb-focusForeground);
-}
-
-input[type="file"] {
-  display: none;
-}
-
-.modal-wrapper {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  padding: 0;
-}
-
-.modal-backdrop {
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background: rgba(0, 0, 0, 0.25);
-  z-index: 2;
-}
-
-.modal h2 {
-  text-align: center;
-}
-
-.modal {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  min-width: 50%;
-  max-width: 60ch;
-  background: #fff;
-  z-index: 3;
-  padding: 2rem;
-  border-radius: 1rem;
-  text-align: left;
-  color: var(--vscode-breadcrumb-foreground);
-}
-
-@media only screen and (max-width: 800px) {
-  .modal {
-    min-width: 90%;
-  }
-
-}
-
-
-.modal input[type="text"], .modal textarea {
-  width: 100%;
-}
-
-.modal textarea {
-  height: 10em;
-}
-
-.modal .form-error {
-  color: #a00;
-  font-weight: bold;
-}
-
-.modal input[type="submit"] {
-  border: none;
-  color: var(--vscode-button-foreground);
-  background: var(--vscode-button-background);
-  cursor: pointer;
-  padding: .5rem 1rem;
-  border-radius: .2rem;
-  display: block;
-  margin: 1rem auto;
-}
-
-.modal-close {
-  float: right;
-  scale: 2;
-  color: var(--vscode-breadcrumb-foreground);
-  cursor: pointer;
-}
-
-.modal-close:hover {
-  float: right;
-  scale: 2;
-  color: var(--vscode-breadcrumb-focusForeground);
-}
-
-.modal table {
-  width: 100%;
-}
-
-a {
-  text-decoration: none;
-  color: var(--vscode-textLink-foreground);
-}
-
 .loading-ring {
   margin: auto;
   display: inline-block;
   width: 80px;
   height: 80px;
 }
+
 .loading-ring:after {
   content: " ";
   display: block;
@@ -218,10 +33,12 @@ a {
   height: 64px;
   margin: 8px;
   border-radius: 50%;
+  /* note: vscode theme not loaded yet, don't use `--vscode-XXX` variables */
   border: 6px solid #aaa;
   border-color: #aaa transparent #aaa transparent;
   animation: loading-ring 1.2s linear infinite;
 }
+
 @keyframes loading-ring {
   0% {
     transform: rotate(0deg);
@@ -231,33 +48,6 @@ a {
   }
 }
 
-/* .dropdown-menu {
-  position: absolute;
-  width: 12rem;
-  top: 150%;
-  left: 0%;
-  /* margin-left: -60px;
-  background: #fff;
-  border: 1px solid #ddd;
-  border-radius: 5px;
-  z-index: 1;
-}
-
-.dropdown-menu .nav-link {
-  display: block;
-} */
-
-.dropdown-menu {
-  position: absolute;
-  right: 100%;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  background-color: #fff;
-  z-index: 1;
-  box-shadow: -0.1rem 0.3rem 0.3rem 0 rgba(0, 0, 0, 0.1);
-}
-
 .hidden {
   display: none !important;
 }
diff --git a/client/src/css/Editor.css b/client/src/css/Editor.css
index 7399ed1f..acad1704 100644
--- a/client/src/css/Editor.css
+++ b/client/src/css/Editor.css
@@ -1,3 +1,9 @@
+.editor-wrapper {
+  flex: 1;
+  min-height: 0;
+  padding-top: .5rem;
+}
+
 .editor {
   display: flex;
   height: 100%;
@@ -41,8 +47,8 @@
 .processing {
   background: linear-gradient(
     to right,
-    rgba(255, 165, 0, 1) 0%,
-    rgba(255, 165, 0, 1) 30%,
+    var(--vscode-editorOverviewRuler-warningForeground) 0%,
+    var(--vscode-editorOverviewRuler-warningForeground) 30%,
     transparent 30%,
     transparent  100%
   );
@@ -50,12 +56,15 @@
 
 /* Styling in the left margin of the editor on error */
 .monaco-editor .glyph-margin-error {
-  background: linear-gradient( to right, rgba(255, 0, 0, 1) 0%, rgba(255, 0, 0, 1) 30%, transparent 30%, transparent 100% )
+  background: linear-gradient( to right,
+  var(--vscode-editorOverviewRuler-warningForeground) 0%,
+  var(--vscode-editorOverviewRuler-warningForeground) 30%,
+    transparent 30%, transparent 100% )
 }
 
 code {
   font-family: 'Source Code Pro', 'STIX Two Math', monospace;
-  color: rgba(0, 32, 90, 0.87);
+  color: var(--vscode-textPreformat-foreground);
 }
 
 
@@ -79,7 +88,7 @@ code {
 .notification-toast {
   margin: .5em;
   background: var(--vscode-notifications-background);
-  box-shadow: rgb(0 0 0 / 16%) 0 0 .5em .1em;
+  box-shadow: var(--vscode-widget-shadow) 0 0 .5em .1em;
   width: 60ch;
   display: flex;
   flex-direction: column;
diff --git a/client/src/css/Modal.css b/client/src/css/Modal.css
new file mode 100644
index 00000000..b662bfa4
--- /dev/null
+++ b/client/src/css/Modal.css
@@ -0,0 +1,99 @@
+input[type="file"] {
+  display: none;
+}
+
+.modal-wrapper {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  padding: 0;
+}
+
+.modal-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: var(--vscode-widget-shadow); /* TODO: What's the correct var? */
+  z-index: 2;
+}
+
+.modal h2 {
+  text-align: center;
+}
+
+.modal {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  min-width: 50%;
+  max-width: 60ch;
+  background: var(--vscode-input-background);
+  z-index: 3;
+  padding: 2rem;
+  border-radius: 1rem;
+  text-align: left;
+  color: var(--vscode-input-foreground);
+}
+
+@media only screen and (max-width: 800px) {
+  .modal {
+    min-width: 90%;
+  }
+
+}
+
+
+.modal input[type="text"], .modal textarea {
+  width: 100%;
+}
+
+.modal select {
+  float: right;
+}
+
+.modal textarea {
+  height: 10em;
+}
+
+.modal .form-error {
+  color: var(--vscode-editorError-foreground);
+  font-weight: bold;
+}
+
+.modal input[type="submit"] {
+  border: none;
+  color: var(--vscode-button-foreground);
+  background: var(--vscode-button-background);
+  cursor: pointer;
+  padding: .5rem 1rem;
+  border-radius: .2rem;
+  display: block;
+  margin: 1rem auto;
+}
+
+.modal-close {
+  float: right;
+  scale: 2;
+  color: var(--vscode-input-foreground);
+  cursor: pointer;
+}
+
+.modal-close:hover {
+  float: right;
+  scale: 2;
+  color: var(--vscode-inputOption-activeForeground); /* TODO: what's the best var to use here? */
+}
+
+.modal table {
+  width: 100%;
+}
+
+a {
+  text-decoration: none;
+  color: var(--vscode-textLink-foreground);
+}
diff --git a/client/src/css/Topbar.css b/client/src/css/Topbar.css
new file mode 100644
index 00000000..46a9f2c4
--- /dev/null
+++ b/client/src/css/Topbar.css
@@ -0,0 +1,91 @@
+.nav {
+  /* box-shadow: 0 .3rem .3rem 0 var(--vscode-menu-separatorBackground); */
+  border-bottom: 1px solid var(--vscode-menu-separatorBackground);
+  background-color: var(--vscode-menu-background);
+  color: var(--vscode-menu-foreground);
+  z-index: 1;
+  position: relative;
+}
+
+/* The Lean logo */
+.nav .logo {
+  height: 2.2rem;
+  width: unset;
+  vertical-align: middle;
+  margin-left: .5rem;
+  margin-right: 1rem;
+  filter: invert(1);
+  mix-blend-mode: difference;
+}
+
+.nav .menu {
+  float: right;
+}
+
+.nav .dropdown {
+  background: none;
+  border: none;
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  right: 0;
+  background-color: var(--vscode-menu-background);
+  z-index: 1;
+  border-top: 1px solid var(--vscode-menu-separatorBackground);
+  border-bottom: 1px solid var(--vscode-menu-separatorBackground);
+  box-shadow: -.1rem .3rem .3rem 0 var(--vscode-menu-separatorBackground);
+}
+
+.nav .submenu {
+  position: absolute;
+  right: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--vscode-menu-background);
+  z-index: 1;
+  box-shadow: -0.1rem 0.3rem 0.3rem 0 var(--vscode-menu-separatorBackground);
+}
+
+/* The menu items */
+.nav .nav-link {
+  background: none;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  text-decoration: none;
+  padding: .5rem;
+  display: inline-block;
+}
+
+/* menu items for dropdown */
+.nav .nav-link {
+  /* width: 100%; */
+  padding-left: .8rem;
+  padding-right: .8rem;
+  padding-top: .6rem;
+  padding-bottom: .6rem;
+}
+
+.nav .nav-link:hover {
+  color: var(--vscode-menu-selectionForeground);
+  background-color: var(--vscode-menu-selectionBackground);
+}
+
+/* `nav-icon` is the burger for the dropdown menu */
+/* .nav-icon {
+  background: none;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  text-decoration: none;
+  padding: .5rem;
+  height: 100%;
+  float: right;
+  padding-right: 1rem;
+}
+
+.nav-icon:hover {
+  color: var(--vscode-menu-selectionForeground);
+  background-color: var(--vscode-menu-selectionBackground);
+} */
diff --git a/client/src/css/dark-theme.css b/client/src/css/dark-theme.css
deleted file mode 100644
index bd518fd9..00000000
--- a/client/src/css/dark-theme.css
+++ /dev/null
@@ -1,1409 +0,0 @@
-/* @media (prefers-color-scheme: dark) {
-  .nav {
-    box-shadow: 0 0.3rem 0.3rem 0 rgba(255, 255, 255, 0.1);
-  }
-
-  .app, .monaco-workbench {
-    background-color: #2B2B2B;
-  }
-} */
-
-.dark-theme .nav-icon:hover {
-  color: #fff;
-}
-
-
-.dark-theme .nav {
-  box-shadow: 0 0.3rem 0.3rem 0 rgba(255, 255, 255, 0.1);
-}
-
-.dark-theme,
-.dark-theme .editor-wrapper {
-  background-color: #2B2B2B;
-}
-
-.dark-theme .dropdown-menu {
-  background-color: #3a3a3a;
-  border: 1px solid #505050;
-}
-
-.dark-theme .modal {
-  background-color: #3a3a3a;
-}
-
-.dark-theme a {
-  color: #3794ff;
-}
-
-.dark-theme .information {
-  color: #198c19;
-}
-
-/*
-Code for dark style of the Monaco editor
-By default, it uses Monokai, get more Monaco editor themes from https://github.com/brijeshb42/monaco-themes
-*/
-.dark-theme .monaco-editor .accessibilityHelpWidget {
-  background-color: #252526;
-}
-.dark-theme .monaco-editor .accessibilityHelpWidget {
-  color: #cccccc;
-}
-.dark-theme .monaco-editor .accessibilityHelpWidget {
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.36);
-}
-.dark-theme .monaco-editor,
-.dark-theme .monaco-editor-background,
-.dark-theme .monaco-editor .inputarea.ime-input {
-  background-color: #2b2b2b;/*#272822;*/
-}
-.dark-theme .monaco-editor,
-.dark-theme .monaco-editor .inputarea.ime-input {
-  color: #f8f8f2;
-}
-.dark-theme .monaco-editor .margin {
-  background-color: #272822;
-}
-.dark-theme .monaco-editor .rangeHighlight {
-  background-color: rgba(255, 255, 255, 0.04);
-}
-.dark-theme .monaco-editor .symbolHighlight {
-  background-color: rgba(234, 92, 0, 0.33);
-}
-.dark-theme .monaco-editor .mtkw {
-  color: #3b3a32 !important;
-}
-.dark-theme .monaco-editor .mtkz {
-  color: #3b3a32 !important;
-}
-.dark-theme .monaco-editor .unexpected-closing-bracket {
-  color: rgba(255, 18, 18, 0.8);
-}
-.dark-theme .monaco-editor .bracket-highlighting-0 {
-  color: #ffd700;
-}
-.dark-theme .monaco-editor .bracket-highlighting-1 {
-  color: #da70d6;
-}
-.dark-theme .monaco-editor .bracket-highlighting-2 {
-  color: #179fff;
-}
-.dark-theme .monaco-editor .bracket-highlighting-3 {
-  color: #ffd700;
-}
-.dark-theme .monaco-editor .bracket-highlighting-4 {
-  color: #da70d6;
-}
-.dark-theme .monaco-editor .bracket-highlighting-5 {
-  color: #179fff;
-}
-.dark-theme .monaco-editor .bracket-highlighting-6 {
-  color: #ffd700;
-}
-.dark-theme .monaco-editor .bracket-highlighting-7 {
-  color: #da70d6;
-}
-.dark-theme .monaco-editor .bracket-highlighting-8 {
-  color: #179fff;
-}
-.dark-theme .monaco-editor .bracket-highlighting-9 {
-  color: #ffd700;
-}
-.dark-theme .monaco-editor .bracket-highlighting-10 {
-  color: #da70d6;
-}
-.dark-theme .monaco-editor .bracket-highlighting-11 {
-  color: #179fff;
-}
-.dark-theme .monaco-editor .bracket-highlighting-12 {
-  color: #ffd700;
-}
-.dark-theme .monaco-editor .bracket-highlighting-13 {
-  color: #da70d6;
-}
-.dark-theme .monaco-editor .bracket-highlighting-14 {
-  color: #179fff;
-}
-.dark-theme .monaco-editor .bracket-highlighting-15 {
-  color: #ffd700;
-}
-.dark-theme .monaco-editor .bracket-highlighting-16 {
-  color: #da70d6;
-}
-.dark-theme .monaco-editor .bracket-highlighting-17 {
-  color: #179fff;
-}
-.dark-theme .monaco-editor .bracket-highlighting-18 {
-  color: #ffd700;
-}
-.dark-theme .monaco-editor .bracket-highlighting-19 {
-  color: #da70d6;
-}
-.dark-theme .monaco-editor .bracket-highlighting-20 {
-  color: #179fff;
-}
-.dark-theme .monaco-editor .bracket-highlighting-21 {
-  color: #ffd700;
-}
-.dark-theme .monaco-editor .bracket-highlighting-22 {
-  color: #da70d6;
-}
-.dark-theme .monaco-editor .bracket-highlighting-23 {
-  color: #179fff;
-}
-.dark-theme .monaco-editor .bracket-highlighting-24 {
-  color: #ffd700;
-}
-.dark-theme .monaco-editor .bracket-highlighting-25 {
-  color: #da70d6;
-}
-.dark-theme .monaco-editor .bracket-highlighting-26 {
-  color: #179fff;
-}
-.dark-theme .monaco-editor .bracket-highlighting-27 {
-  color: #ffd700;
-}
-.dark-theme .monaco-editor .bracket-highlighting-28 {
-  color: #da70d6;
-}
-.dark-theme .monaco-editor .bracket-highlighting-29 {
-  color: #179fff;
-}
-.dark-theme .monaco-editor .bracket-match {
-  background-color: rgba(0, 100, 0, 0.1);
-}
-.dark-theme .monaco-editor .bracket-match {
-  border: 1px solid #888888;
-}
-
-.dark-theme .monaco-editor .contentWidgets .codicon.codicon-light-bulb {
-  color: #ffcc00;
-  background-color: rgba(39, 40, 34, 0.7);
-}
-
-.dark-theme .monaco-editor .contentWidgets .codicon.codicon-lightbulb-autofix {
-  color: #75beff;
-  background-color: rgba(39, 40, 34, 0.7);
-}
-.dark-theme .monaco-editor .line-numbers {
-  color: #858585;
-}
-.dark-theme .monaco-editor .line-numbers.active-line-number {
-  color: #c6c6c6;
-}
-.dark-theme .monaco-editor .view-overlays .current-line {
-  background-color: #3e3d32;
-}
-.dark-theme .monaco-editor .margin-view-overlays .current-line-margin {
-  background-color: #3e3d32;
-  border: none;
-}
-
-.dark-theme .monaco-scrollable-element > .shadow.top {
-  box-shadow: #000000 0 6px 6px -6px inset;
-}
-
-.dark-theme .monaco-scrollable-element > .shadow.left {
-  box-shadow: #000000 6px 0 6px -6px inset;
-}
-
-.dark-theme .monaco-scrollable-element > .shadow.top.left {
-  box-shadow: #000000 6px 6px 6px -6px inset;
-}
-
-
-.dark-theme .monaco-scrollable-element > .scrollbar > .slider {
-  background: rgba(121, 121, 121, 0.4);
-}
-
-
-.dark-theme .monaco-scrollable-element > .scrollbar > .slider:hover {
-  background: rgba(100, 100, 100, 0.7);
-}
-
-
-.dark-theme .monaco-scrollable-element > .scrollbar > .slider.active {
-  background: rgba(191, 191, 191, 0.4);
-}
-
-.dark-theme .monaco-editor .lines-content .core-guide-indent {
-  box-shadow: 1px 0 0 0 #404040 inset;
-}
-.dark-theme .monaco-editor .lines-content .core-guide-indent-active {
-  box-shadow: 1px 0 0 0 rgba(157, 85, 15, 0.69) inset;
-}
-.dark-theme .monaco-editor .bracket-indent-guide.lvl-0 {
-  --guide-color: rgba(255, 215, 0, 0.3);
-  --guide-color-active: #ffd700;
-}
-.dark-theme .monaco-editor .bracket-indent-guide.lvl-1 {
-  --guide-color: rgba(218, 112, 214, 0.3);
-  --guide-color-active: #da70d6;
-}
-.dark-theme .monaco-editor .bracket-indent-guide.lvl-2 {
-  --guide-color: rgba(23, 159, 255, 0.3);
-  --guide-color-active: #179fff;
-}
-.dark-theme .monaco-editor .bracket-indent-guide.lvl-3 {
-  --guide-color: rgba(255, 215, 0, 0.3);
-  --guide-color-active: #ffd700;
-}
-.dark-theme .monaco-editor .bracket-indent-guide.lvl-4 {
-  --guide-color: rgba(218, 112, 214, 0.3);
-  --guide-color-active: #da70d6;
-}
-.dark-theme .monaco-editor .bracket-indent-guide.lvl-5 {
-  --guide-color: rgba(23, 159, 255, 0.3);
-  --guide-color-active: #179fff;
-}
-.dark-theme .monaco-editor .bracket-indent-guide.lvl-6 {
-  --guide-color: rgba(255, 215, 0, 0.3);
-  --guide-color-active: #ffd700;
-}
-.dark-theme .monaco-editor .bracket-indent-guide.lvl-7 {
-  --guide-color: rgba(218, 112, 214, 0.3);
-  --guide-color-active: #da70d6;
-}
-.dark-theme .monaco-editor .bracket-indent-guide.lvl-8 {
-  --guide-color: rgba(23, 159, 255, 0.3);
-  --guide-color-active: #179fff;
-}
-.dark-theme .monaco-editor .bracket-indent-guide.lvl-9 {
-  --guide-color: rgba(255, 215, 0, 0.3);
-  --guide-color-active: #ffd700;
-}
-.dark-theme .monaco-editor .bracket-indent-guide.lvl-10 {
-  --guide-color: rgba(218, 112, 214, 0.3);
-  --guide-color-active: #da70d6;
-}
-.dark-theme .monaco-editor .bracket-indent-guide.lvl-11 {
-  --guide-color: rgba(23, 159, 255, 0.3);
-  --guide-color-active: #179fff;
-}
-.dark-theme .monaco-editor .bracket-indent-guide.lvl-12 {
-  --guide-color: rgba(255, 215, 0, 0.3);
-  --guide-color-active: #ffd700;
-}
-.dark-theme .monaco-editor .bracket-indent-guide.lvl-13 {
-  --guide-color: rgba(218, 112, 214, 0.3);
-  --guide-color-active: #da70d6;
-}
-.dark-theme .monaco-editor .bracket-indent-guide.lvl-14 {
-  --guide-color: rgba(23, 159, 255, 0.3);
-  --guide-color-active: #179fff;
-}
-.dark-theme .monaco-editor .bracket-indent-guide.lvl-15 {
-  --guide-color: rgba(255, 215, 0, 0.3);
-  --guide-color-active: #ffd700;
-}
-.dark-theme .monaco-editor .bracket-indent-guide.lvl-16 {
-  --guide-color: rgba(218, 112, 214, 0.3);
-  --guide-color-active: #da70d6;
-}
-.dark-theme .monaco-editor .bracket-indent-guide.lvl-17 {
-  --guide-color: rgba(23, 159, 255, 0.3);
-  --guide-color-active: #179fff;
-}
-.dark-theme .monaco-editor .bracket-indent-guide.lvl-18 {
-  --guide-color: rgba(255, 215, 0, 0.3);
-  --guide-color-active: #ffd700;
-}
-.dark-theme .monaco-editor .bracket-indent-guide.lvl-19 {
-  --guide-color: rgba(218, 112, 214, 0.3);
-  --guide-color-active: #da70d6;
-}
-.dark-theme .monaco-editor .bracket-indent-guide.lvl-20 {
-  --guide-color: rgba(23, 159, 255, 0.3);
-  --guide-color-active: #179fff;
-}
-.dark-theme .monaco-editor .bracket-indent-guide.lvl-21 {
-  --guide-color: rgba(255, 215, 0, 0.3);
-  --guide-color-active: #ffd700;
-}
-.dark-theme .monaco-editor .bracket-indent-guide.lvl-22 {
-  --guide-color: rgba(218, 112, 214, 0.3);
-  --guide-color-active: #da70d6;
-}
-.dark-theme .monaco-editor .bracket-indent-guide.lvl-23 {
-  --guide-color: rgba(23, 159, 255, 0.3);
-  --guide-color-active: #179fff;
-}
-.dark-theme .monaco-editor .bracket-indent-guide.lvl-24 {
-  --guide-color: rgba(255, 215, 0, 0.3);
-  --guide-color-active: #ffd700;
-}
-.dark-theme .monaco-editor .bracket-indent-guide.lvl-25 {
-  --guide-color: rgba(218, 112, 214, 0.3);
-  --guide-color-active: #da70d6;
-}
-.dark-theme .monaco-editor .bracket-indent-guide.lvl-26 {
-  --guide-color: rgba(23, 159, 255, 0.3);
-  --guide-color-active: #179fff;
-}
-.dark-theme .monaco-editor .bracket-indent-guide.lvl-27 {
-  --guide-color: rgba(255, 215, 0, 0.3);
-  --guide-color-active: #ffd700;
-}
-.dark-theme .monaco-editor .bracket-indent-guide.lvl-28 {
-  --guide-color: rgba(218, 112, 214, 0.3);
-  --guide-color-active: #da70d6;
-}
-.dark-theme .monaco-editor .bracket-indent-guide.lvl-29 {
-  --guide-color: rgba(23, 159, 255, 0.3);
-  --guide-color-active: #179fff;
-}
-.dark-theme .monaco-editor .vertical {
-  box-shadow: 1px 0 0 0 var(--guide-color) inset;
-}
-.dark-theme .monaco-editor .horizontal-top {
-  border-top: 1px solid var(--guide-color);
-}
-.dark-theme .monaco-editor .horizontal-bottom {
-  border-bottom: 1px solid var(--guide-color);
-}
-.dark-theme .monaco-editor .vertical.indent-active {
-  box-shadow: 1px 0 0 0 var(--guide-color-active) inset;
-}
-.dark-theme .monaco-editor .horizontal-top.indent-active {
-  border-top: 1px solid var(--guide-color-active);
-}
-.dark-theme .monaco-editor .horizontal-bottom.indent-active {
-  border-bottom: 1px solid var(--guide-color-active);
-}
-.dark-theme .monaco-editor .minimap-slider .minimap-slider-horizontal {
-  background: rgba(121, 121, 121, 0.2);
-}
-.dark-theme .monaco-editor .minimap-slider:hover .minimap-slider-horizontal {
-  background: rgba(100, 100, 100, 0.35);
-}
-.dark-theme .monaco-editor .minimap-slider.active .minimap-slider-horizontal {
-  background: rgba(191, 191, 191, 0.2);
-}
-.dark-theme .monaco-editor .minimap-shadow-visible {
-  box-shadow: #000000 -6px 0 6px -6px inset;
-}
-.dark-theme .monaco-editor .view-ruler {
-  box-shadow: 1px 0 0 0 #5a5a5a inset;
-}
-.dark-theme .monaco-editor .scroll-decoration {
-  box-shadow: #000000 0 6px 6px -6px inset;
-}
-.dark-theme .monaco-editor .focused .selected-text {
-  background-color: #49483e;
-}
-.dark-theme .monaco-editor .selected-text {
-  background-color: #3a3d41;
-}
-.dark-theme .monaco-editor .inputarea.ime-input {
-  caret-color: #f8f8f0;
-}
-.dark-theme .monaco-editor .cursors-layer .cursor {
-  background-color: #f8f8f0;
-  border-color: #f8f8f0;
-  color: #07070f;
-}
-.dark-theme .monaco-editor .squiggly-error {
-  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%206%203'%20enable-background%3D'new%200%200%206%203'%20height%3D'3'%20width%3D'6'%3E%3Cg%20fill%3D'%23f14c4c'%3E%3Cpolygon%20points%3D'5.5%2C0%202.5%2C3%201.1%2C3%204.1%2C0'%2F%3E%3Cpolygon%20points%3D'4%2C0%206%2C2%206%2C0.6%205.4%2C0'%2F%3E%3Cpolygon%20points%3D'0%2C2%201%2C3%202.4%2C3%200%2C0.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") repeat-x bottom left;
-}
-.dark-theme .monaco-editor .squiggly-warning {
-  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%206%203'%20enable-background%3D'new%200%200%206%203'%20height%3D'3'%20width%3D'6'%3E%3Cg%20fill%3D'%23cca700'%3E%3Cpolygon%20points%3D'5.5%2C0%202.5%2C3%201.1%2C3%204.1%2C0'%2F%3E%3Cpolygon%20points%3D'4%2C0%206%2C2%206%2C0.6%205.4%2C0'%2F%3E%3Cpolygon%20points%3D'0%2C2%201%2C3%202.4%2C3%200%2C0.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") repeat-x bottom left;
-}
-.dark-theme .monaco-editor .squiggly-info {
-  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%206%203'%20enable-background%3D'new%200%200%206%203'%20height%3D'3'%20width%3D'6'%3E%3Cg%20fill%3D'%233794ff'%3E%3Cpolygon%20points%3D'5.5%2C0%202.5%2C3%201.1%2C3%204.1%2C0'%2F%3E%3Cpolygon%20points%3D'4%2C0%206%2C2%206%2C0.6%205.4%2C0'%2F%3E%3Cpolygon%20points%3D'0%2C2%201%2C3%202.4%2C3%200%2C0.6'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") repeat-x bottom left;
-}
-.dark-theme .monaco-editor .squiggly-hint {
-  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%223%22%20width%3D%2212%22%3E%3Cg%20fill%3D%22rgba(238%2C%20238%2C%20238%2C%200.7)%22%3E%3Ccircle%20cx%3D%221%22%20cy%3D%221%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%225%22%20cy%3D%221%22%20r%3D%221%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%221%22%20r%3D%221%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat bottom left;
-}
-.dark-theme .monaco-editor.showUnused .squiggly-inline-unnecessary {
-  opacity: 0.667;
-}
-.dark-theme .monaco-editor.showDeprecated .squiggly-inline-deprecated {
-  text-decoration: line-through;
-  text-decoration-color: #f8f8f2
-}
-.dark-theme .monaco-editor .goto-definition-link {
-  color: #4e94ce !important;
-}
-
-.dark-theme .monaco-editor .zone-widget .codicon.codicon-error,
-.dark-theme .markers-panel .marker-icon.codicon.codicon-error,
-.dark-theme .text-search-provider-messages .providerMessage .codicon.codicon-error,
-.dark-theme .extensions-viewlet > .extensions .codicon.codicon-error {
-  color: #f14c4c;
-}
-
-
-.dark-theme .monaco-editor .zone-widget .codicon.codicon-warning,
-.dark-theme .markers-panel .marker-icon.codicon.codicon-warning,
-.dark-theme .extensions-viewlet > .extensions .codicon.codicon-warning,
-.dark-theme .extension-editor .codicon.codicon-warning,
-.dark-theme .text-search-provider-messages .providerMessage .codicon.codicon-warning,
-.dark-theme .preferences-editor .codicon.codicon-warning {
-  color: #cca700;
-}
-
-
-.dark-theme .monaco-editor .zone-widget .codicon.codicon-info,
-.dark-theme .markers-panel .marker-icon.codicon.codicon-info,
-.dark-theme .extensions-viewlet > .extensions .codicon.codicon-info,
-.dark-theme .text-search-provider-messages .providerMessage .codicon.codicon-info,
-.dark-theme .extension-editor .codicon.codicon-info {
-  color: #3794ff;
-}
-
-.dark-theme .monaco-hover .hover-contents a.code-link span {
-  color: #3794ff;
-}
-.dark-theme .monaco-hover .hover-contents a.code-link span:hover {
-  color: #3794ff;
-}
-.dark-theme .monaco-editor .hoverHighlight {
-  background-color: rgba(38, 79, 120, 0.25);
-}
-.dark-theme .monaco-editor .monaco-hover {
-  background-color: #252526;
-}
-.dark-theme .monaco-editor .monaco-hover {
-  border: 1px solid #454545;
-}
-.dark-theme .monaco-editor .monaco-hover .hover-row:not(:first-child):not(:empty) {
-  border-top: 1px solid rgba(69, 69, 69, 0.5);
-}
-.dark-theme .monaco-editor .monaco-hover hr {
-  border-top: 1px solid rgba(69, 69, 69, 0.5);
-}
-.dark-theme .monaco-editor .monaco-hover hr {
-  border-bottom: 0px solid rgba(69, 69, 69, 0.5);
-}
-.dark-theme .monaco-editor .monaco-hover a {
-  color: #3794ff;
-}
-.dark-theme .monaco-editor .monaco-hover a:hover {
-  color: #3794ff;
-}
-.dark-theme .monaco-editor .monaco-hover {
-  color: #cccccc;
-}
-.dark-theme .monaco-editor .monaco-hover .hover-row .actions {
-  background-color: #2c2c2d;
-}
-.dark-theme .monaco-editor .monaco-hover code {
-  background-color: rgba(10, 10, 10, 0.4);
-}
-.dark-theme .monaco-editor .findOptionsWidget {
-  background-color: #252526;
-}
-.dark-theme .monaco-editor .findOptionsWidget {
-  color: #cccccc;
-}
-.dark-theme .monaco-editor .findOptionsWidget {
-  box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.36);
-}
-.dark-theme .monaco-editor .findMatch {
-  background-color: rgba(234, 92, 0, 0.33);
-}
-.dark-theme .monaco-editor .currentFindMatch {
-  background-color: #515c6a;
-}
-.dark-theme .monaco-editor .findScope {
-  background-color: rgba(58, 61, 65, 0.4);
-}
-.dark-theme .monaco-editor .find-widget {
-  background-color: #252526;
-}
-.dark-theme .monaco-editor .find-widget {
-  box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.36);
-}
-.dark-theme .monaco-editor .find-widget {
-  color: #cccccc;
-}
-.dark-theme .monaco-editor .find-widget.no-results .matchesCount {
-  color: #f48771;
-}
-.dark-theme .monaco-editor .find-widget .monaco-sash {
-  background-color: #454545;
-}
-
-.dark-theme .monaco-editor .find-widget .button:not(.disabled):hover,
-.dark-theme .monaco-editor .find-widget .codicon-find-selection:hover {
-  background-color: rgba(90, 93, 94, 0.31) !important;
-}
-
-.dark-theme .monaco-editor .find-widget .monaco-inputbox.synthetic-focus {
-  outline-color: #007fd4;
-}
-.dark-theme .monaco-editor .folded-background {
-  background-color: rgba(73, 72, 62, 0.3);
-}
-
-.dark-theme .monaco-editor .cldr.codicon.codicon-folding-expanded,
-.dark-theme .monaco-editor .cldr.codicon.codicon-folding-collapsed {
-  color: #c5c5c5 !important;
-}
-
-.dark-theme .monaco-editor.vs .valueSetReplacement {
-  outline: solid 2px #888888;
-}
-.dark-theme .codicon.codicon-symbol-array {
-  color: #cccccc;
-}
-.dark-theme .codicon.codicon-symbol-boolean {
-  color: #cccccc;
-}
-.dark-theme .codicon.codicon-symbol-class {
-  color: #ee9d28;
-}
-.dark-theme .codicon.codicon-symbol-method {
-  color: #b180d7;
-}
-.dark-theme .codicon.codicon-symbol-color {
-  color: #cccccc;
-}
-.dark-theme .codicon.codicon-symbol-constant {
-  color: #cccccc;
-}
-.dark-theme .codicon.codicon-symbol-constructor {
-  color: #b180d7;
-}
-
-.dark-theme .codicon.codicon-symbol-value,
-.dark-theme .codicon.codicon-symbol-enum {
-  color: #ee9d28;
-}
-.dark-theme .codicon.codicon-symbol-enum-member {
-  color: #75beff;
-}
-.dark-theme .codicon.codicon-symbol-event {
-  color: #ee9d28;
-}
-.dark-theme .codicon.codicon-symbol-field {
-  color: #75beff;
-}
-.dark-theme .codicon.codicon-symbol-file {
-  color: #cccccc;
-}
-.dark-theme .codicon.codicon-symbol-folder {
-  color: #cccccc;
-}
-.dark-theme .codicon.codicon-symbol-function {
-  color: #b180d7;
-}
-.dark-theme .codicon.codicon-symbol-interface {
-  color: #75beff;
-}
-.dark-theme .codicon.codicon-symbol-key {
-  color: #cccccc;
-}
-.dark-theme .codicon.codicon-symbol-keyword {
-  color: #cccccc;
-}
-.dark-theme .codicon.codicon-symbol-module {
-  color: #cccccc;
-}
-.dark-theme .codicon.codicon-symbol-namespace {
-  color: #cccccc;
-}
-.dark-theme .codicon.codicon-symbol-null {
-  color: #cccccc;
-}
-.dark-theme .codicon.codicon-symbol-number {
-  color: #cccccc;
-}
-.dark-theme .codicon.codicon-symbol-object {
-  color: #cccccc;
-}
-.dark-theme .codicon.codicon-symbol-operator {
-  color: #cccccc;
-}
-.dark-theme .codicon.codicon-symbol-package {
-  color: #cccccc;
-}
-.dark-theme .codicon.codicon-symbol-property {
-  color: #cccccc;
-}
-.dark-theme .codicon.codicon-symbol-reference {
-  color: #cccccc;
-}
-.dark-theme .codicon.codicon-symbol-snippet {
-  color: #cccccc;
-}
-.dark-theme .codicon.codicon-symbol-string {
-  color: #cccccc;
-}
-.dark-theme .codicon.codicon-symbol-struct {
-  color: #cccccc;
-}
-.dark-theme .codicon.codicon-symbol-text {
-  color: #cccccc;
-}
-.dark-theme .codicon.codicon-symbol-type-parameter {
-  color: #cccccc;
-}
-.dark-theme .codicon.codicon-symbol-unit {
-  color: #cccccc;
-}
-.dark-theme .codicon.codicon-symbol-variable {
-  color: #75beff;
-}
-.dark-theme .monaco-editor .ghost-text-decoration {
-  color: rgba(255, 255, 255, 0.34) !important;
-}
-.dark-theme .monaco-editor .ghost-text-decoration-preview {
-  color: rgba(255, 255, 255, 0.34) !important;
-}
-.dark-theme .monaco-editor .suggest-preview-text .ghost-text {
-  color: rgba(255, 255, 255, 0.34) !important;
-}
-.dark-theme .monaco-editor .tokens-inspect-widget {
-  border: 1px solid #454545;
-}
-.dark-theme .monaco-editor .tokens-inspect-widget .tokens-inspect-separator {
-  background-color: #454545;
-}
-.dark-theme .monaco-editor .tokens-inspect-widget {
-  background-color: #252526;
-}
-.dark-theme .monaco-editor .tokens-inspect-widget {
-  color: #cccccc;
-}
-.dark-theme .monaco-editor .linked-editing-decoration {
-  background: rgba(255, 0, 0, 0.3);
-  border-left-color: rgba(255, 0, 0, 0.3);
-}
-.dark-theme .monaco-editor .detected-link-active {
-  color: #4e94ce !important;
-}
-.dark-theme .monaco-editor .parameter-hints-widget {
-  border: 1px solid #454545;
-}
-.dark-theme .monaco-editor .parameter-hints-widget.multiple .body {
-  border-left: 1px solid rgba(69, 69, 69, 0.5);
-}
-.dark-theme .monaco-editor .parameter-hints-widget .signature.has-docs {
-  border-bottom: 1px solid rgba(69, 69, 69, 0.5);
-}
-.dark-theme .monaco-editor .parameter-hints-widget {
-  background-color: #252526;
-}
-.dark-theme .monaco-editor .parameter-hints-widget a {
-  color: #3794ff;
-}
-.dark-theme .monaco-editor .parameter-hints-widget a:hover {
-  color: #3794ff;
-}
-.dark-theme .monaco-editor .parameter-hints-widget {
-  color: #cccccc;
-}
-.dark-theme .monaco-editor .parameter-hints-widget code {
-  background-color: rgba(10, 10, 10, 0.4);
-}
-.dark-theme .monaco-editor .parameter-hints-widget .parameter.active {
-  color: #18a3ff
-}
-.dark-theme .monaco-link {
-  color: #3794ff;
-}
-.dark-theme .monaco-link:hover {
-  color: #3794ff;
-}
-.dark-theme .monaco-editor .focused .selectionHighlight {
-  background-color: rgba(149, 184, 220, .15);
-}
-.dark-theme .monaco-editor .selectionHighlight {
-  background-color: rgba(173, 214, 255, 0.07);
-}
-.dark-theme .monaco-editor .wordHighlight {
-  background-color: rgba(87, 87, 87, 0.72);
-}
-.dark-theme .monaco-editor .wordHighlightStrong {
-  background-color: rgba(0, 73, 114, 0.72);
-}
-.dark-theme .monaco-editor .selectionHighlight {
-  border: 1px solid #383829;
-  box-sizing: border-box;
-}
-.dark-theme .monaco-diff-editor .diff-review-line-number {
-  color: #858585;
-}
-.dark-theme .monaco-diff-editor .diff-review-shadow {
-  box-shadow: #000000 0 -6px 6px -6px inset;
-}
-.dark-theme .monaco-editor .char-insert,
-.dark-theme .monaco-diff-editor .char-insert {
-  background-color: rgba(155, 185, 85, 0.2);
-}
-.dark-theme .monaco-editor .line-insert,
-.dark-theme .monaco-diff-editor .line-insert {
-  background-color: rgba(155, 185, 85, 0.2);
-}
-.dark-theme .monaco-editor .inline-added-margin-view-zone {
-  background-color: rgba(155, 185, 85, 0.2);
-}
-.dark-theme .monaco-editor .gutter-insert,
-.dark-theme .monaco-diff-editor .gutter-insert {
-  background-color: rgba(155, 185, 85, 0.2);
-}
-.dark-theme .monaco-editor .char-delete,
-.dark-theme .monaco-diff-editor .char-delete {
-  background-color: rgba(255, 0, 0, 0.2);
-}
-.dark-theme .monaco-editor .line-delete,
-.dark-theme .monaco-diff-editor .line-delete {
-  background-color: rgba(255, 0, 0, 0.2);
-}
-.dark-theme .monaco-editor .inline-deleted-margin-view-zone {
-  background-color: rgba(255, 0, 0, 0.2);
-}
-.dark-theme .monaco-editor .gutter-delete,
-.dark-theme .monaco-diff-editor .gutter-delete {
-  background-color: rgba(255, 0, 0, 0.2);
-}
-.dark-theme .monaco-diff-editor.side-by-side .editor.modified {
-  box-shadow: -6px 0 5px -5px #000000;
-}
-
-.dark-theme .monaco-diff-editor .diffViewport {
-  background: rgba(121, 121, 121, 0.4);
-}
-
-
-.dark-theme .monaco-diff-editor .diffViewport:hover {
-  background: rgba(100, 100, 100, 0.7);
-}
-
-
-.dark-theme .monaco-diff-editor .diffViewport:active {
-  background: rgba(191, 191, 191, 0.4);
-}
-
-
-.dark-theme .monaco-editor .diagonal-fill {
-  background-image: linear-gradient( -45deg,
-  rgba(204, 204, 204, 0.2) 12.5%,
-  #0000 12.5%, #0000 50%,
-  rgba(204, 204, 204, 0.2) 50%, rgba(204, 204, 204, 0.2) 62.5%,
-  #0000 62.5%, #0000 100%);
-  background-size: 8px 8px;
-}
-
-.dark-theme .monaco-editor {
-  --vscode-foreground: #cccccc;
-  --vscode-errorForeground: #f48771;
-  --vscode-descriptionForeground: rgba(204, 204, 204, 0.7);
-  --vscode-icon-foreground: #c5c5c5;
-  --vscode-focusBorder: #007fd4;
-  --vscode-textSeparator-foreground: rgba(255, 255, 255, 0.18);
-  --vscode-textLink-foreground: #3794ff;
-  --vscode-textLink-activeForeground: #3794ff;
-  --vscode-textPreformat-foreground: #d7ba7d;
-  --vscode-textBlockQuote-background: rgba(127, 127, 127, 0.1);
-  --vscode-textBlockQuote-border: rgba(0, 122, 204, 0.5);
-  --vscode-textCodeBlock-background: rgba(10, 10, 10, 0.4);
-  --vscode-widget-shadow: rgba(0, 0, 0, 0.36);
-  --vscode-input-background: #3c3c3c;
-  --vscode-input-foreground: #cccccc;
-  --vscode-inputOption-activeBorder: rgba(0, 122, 204, 0);
-  --vscode-inputOption-hoverBackground: rgba(90, 93, 94, 0.5);
-  --vscode-inputOption-activeBackground: rgba(0, 127, 212, 0.4);
-  --vscode-inputOption-activeForeground: #ffffff;
-  --vscode-input-placeholderForeground: rgba(204, 204, 204, 0.5);
-  --vscode-inputValidation-infoBackground: #063b49;
-  --vscode-inputValidation-infoBorder: #007acc;
-  --vscode-inputValidation-warningBackground: #352a05;
-  --vscode-inputValidation-warningBorder: #b89500;
-  --vscode-inputValidation-errorBackground: #5a1d1d;
-  --vscode-inputValidation-errorBorder: #be1100;
-  --vscode-dropdown-background: #3c3c3c;
-  --vscode-dropdown-foreground: #f0f0f0;
-  --vscode-dropdown-border: #3c3c3c;
-  --vscode-checkbox-background: #3c3c3c;
-  --vscode-checkbox-foreground: #f0f0f0;
-  --vscode-checkbox-border: #3c3c3c;
-  --vscode-button-foreground: #ffffff;
-  --vscode-button-background: #0e639c;
-  --vscode-button-hoverBackground: #1177bb;
-  --vscode-button-secondaryForeground: #ffffff;
-  --vscode-button-secondaryBackground: #3a3d41;
-  --vscode-button-secondaryHoverBackground: #45494e;
-  --vscode-badge-background: #4d4d4d;
-  --vscode-badge-foreground: #ffffff;
-  --vscode-scrollbar-shadow: #000000;
-  --vscode-scrollbarSlider-background: rgba(121, 121, 121, 0.4);
-  --vscode-scrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7);
-  --vscode-scrollbarSlider-activeBackground: rgba(191, 191, 191, 0.4);
-  --vscode-progressBar-background: #0e70c0;
-  --vscode-editorError-foreground: #f14c4c;
-  --vscode-editorWarning-foreground: #cca700;
-  --vscode-editorInfo-foreground: #3794ff;
-  --vscode-editorHint-foreground: rgba(238, 238, 238, 0.7);
-  --vscode-sash-hoverBorder: #007fd4;
-  --vscode-editor-background: #272822;
-  --vscode-editor-foreground: #f8f8f2;
-  --vscode-editorWidget-background: #252526;
-  --vscode-editorWidget-foreground: #cccccc;
-  --vscode-editorWidget-border: #454545;
-  --vscode-quickInput-background: #252526;
-  --vscode-quickInput-foreground: #cccccc;
-  --vscode-quickInputTitle-background: rgba(255, 255, 255, 0.1);
-  --vscode-pickerGroup-foreground: #3794ff;
-  --vscode-pickerGroup-border: #3f3f46;
-  --vscode-keybindingLabel-background: rgba(128, 128, 128, 0.17);
-  --vscode-keybindingLabel-foreground: #cccccc;
-  --vscode-keybindingLabel-border: rgba(51, 51, 51, 0.6);
-  --vscode-keybindingLabel-bottomBorder: rgba(68, 68, 68, 0.6);
-  --vscode-editor-selectionBackground: #49483e;
-  --vscode-editor-inactiveSelectionBackground: #3a3d41;
-  --vscode-editor-selectionHighlightBackground: rgba(173, 214, 255, 0.15);
-  --vscode-editor-selectionHighlightBorder: #222218;
-  --vscode-editor-findMatchBackground: #515c6a;
-  --vscode-editor-findMatchHighlightBackground: rgba(234, 92, 0, 0.33);
-  --vscode-editor-findRangeHighlightBackground: rgba(58, 61, 65, 0.4);
-  --vscode-searchEditor-findMatchBackground: rgba(234, 92, 0, 0.22);
-  --vscode-editor-hoverHighlightBackground: rgba(38, 79, 120, 0.25);
-  --vscode-editorHoverWidget-background: #252526;
-  --vscode-editorHoverWidget-foreground: #cccccc;
-  --vscode-editorHoverWidget-border: #454545;
-  --vscode-editorHoverWidget-statusBarBackground: #2c2c2d;
-  --vscode-editorLink-activeForeground: #4e94ce;
-  --vscode-editorInlayHint-foreground: rgba(255, 255, 255, 0.8);
-  --vscode-editorInlayHint-background: rgba(77, 77, 77, 0.6);
-  --vscode-editorInlayHint-typeForeground: rgba(255, 255, 255, 0.8);
-  --vscode-editorInlayHint-typeBackground: rgba(77, 77, 77, 0.6);
-  --vscode-editorInlayHint-parameterForeground: rgba(255, 255, 255, 0.8);
-  --vscode-editorInlayHint-parameterBackground: rgba(77, 77, 77, 0.6);
-  --vscode-editorLightBulb-foreground: #ffcc00;
-  --vscode-editorLightBulbAutoFix-foreground: #75beff;
-  --vscode-diffEditor-insertedTextBackground: rgba(155, 185, 85, 0.2);
-  --vscode-diffEditor-removedTextBackground: rgba(255, 0, 0, 0.2);
-  --vscode-diffEditor-diagonalFill: rgba(204, 204, 204, 0.2);
-  --vscode-list-focusOutline: #007fd4;
-  --vscode-list-activeSelectionBackground: #094771;
-  --vscode-list-activeSelectionForeground: #ffffff;
-  --vscode-list-inactiveSelectionBackground: #37373d;
-  --vscode-list-hoverBackground: #2a2d2e;
-  --vscode-list-dropBackground: #062f4a;
-  --vscode-list-highlightForeground: #18a3ff;
-  --vscode-list-focusHighlightForeground: #18a3ff;
-  --vscode-list-invalidItemForeground: #b89500;
-  --vscode-list-errorForeground: #f88070;
-  --vscode-list-warningForeground: #cca700;
-  --vscode-listFilterWidget-background: #653723;
-  --vscode-listFilterWidget-outline: rgba(0, 0, 0, 0);
-  --vscode-listFilterWidget-noMatchesOutline: #be1100;
-  --vscode-list-filterMatchBackground: rgba(234, 92, 0, 0.33);
-  --vscode-tree-indentGuidesStroke: #585858;
-  --vscode-tree-tableColumnsBorder: rgba(204, 204, 204, 0.13);
-  --vscode-tree-tableOddRowsBackground: rgba(204, 204, 204, 0.04);
-  --vscode-list-deemphasizedForeground: #8c8c8c;
-  --vscode-quickInputList-focusForeground: #ffffff;
-  --vscode-quickInputList-focusBackground: #094771;
-  --vscode-menu-foreground: #f0f0f0;
-  --vscode-menu-background: #3c3c3c;
-  --vscode-menu-selectionForeground: #ffffff;
-  --vscode-menu-selectionBackground: #094771;
-  --vscode-menu-separatorBackground: #bbbbbb;
-  --vscode-toolbar-hoverBackground: rgba(90, 93, 94, 0.31);
-  --vscode-toolbar-activeBackground: rgba(99, 102, 103, 0.31);
-  --vscode-editor-snippetTabstopHighlightBackground: rgba(124, 124, 124, 0.3);
-  --vscode-editor-snippetFinalTabstopHighlightBorder: #525252;
-  --vscode-breadcrumb-foreground: rgba(204, 204, 204, 0.8);
-  --vscode-breadcrumb-background: #272822;
-  --vscode-breadcrumb-focusForeground: #e0e0e0;
-  --vscode-breadcrumb-activeSelectionForeground: #e0e0e0;
-  --vscode-breadcrumbPicker-background: #252526;
-  --vscode-merge-currentHeaderBackground: rgba(64, 200, 174, 0.5);
-  --vscode-merge-currentContentBackground: rgba(64, 200, 174, 0.2);
-  --vscode-merge-incomingHeaderBackground: rgba(64, 166, 255, 0.5);
-  --vscode-merge-incomingContentBackground: rgba(64, 166, 255, 0.2);
-  --vscode-merge-commonHeaderBackground: rgba(96, 96, 96, 0.4);
-  --vscode-merge-commonContentBackground: rgba(96, 96, 96, 0.16);
-  --vscode-editorOverviewRuler-currentContentForeground: rgba(64, 200, 174, 0.5);
-  --vscode-editorOverviewRuler-incomingContentForeground: rgba(64, 166, 255, 0.5);
-  --vscode-editorOverviewRuler-commonContentForeground: rgba(96, 96, 96, 0.4);
-  --vscode-editorOverviewRuler-findMatchForeground: rgba(209, 134, 22, 0.49);
-  --vscode-editorOverviewRuler-selectionHighlightForeground: rgba(160, 160, 160, 0.8);
-  --vscode-minimap-findMatchHighlight: #d18616;
-  --vscode-minimap-selectionOccurrenceHighlight: #676767;
-  --vscode-minimap-selectionHighlight: #264f78;
-  --vscode-minimap-errorHighlight: rgba(255, 18, 18, 0.7);
-  --vscode-minimap-warningHighlight: #cca700;
-  --vscode-minimap-foregroundOpacity: #000000;
-  --vscode-minimapSlider-background: rgba(121, 121, 121, 0.2);
-  --vscode-minimapSlider-hoverBackground: rgba(100, 100, 100, 0.35);
-  --vscode-minimapSlider-activeBackground: rgba(191, 191, 191, 0.2);
-  --vscode-problemsErrorIcon-foreground: #f14c4c;
-  --vscode-problemsWarningIcon-foreground: #cca700;
-  --vscode-problemsInfoIcon-foreground: #3794ff;
-  --vscode-charts-foreground: #cccccc;
-  --vscode-charts-lines: rgba(204, 204, 204, 0.5);
-  --vscode-charts-red: #f14c4c;
-  --vscode-charts-blue: #3794ff;
-  --vscode-charts-yellow: #cca700;
-  --vscode-charts-orange: #d18616;
-  --vscode-charts-green: #89d185;
-  --vscode-charts-purple: #b180d7;
-  --vscode-editor-lineHighlightBackground: #3e3d32;
-  --vscode-editor-lineHighlightBorder: #282828;
-  --vscode-editor-rangeHighlightBackground: rgba(255, 255, 255, 0.04);
-  --vscode-editor-symbolHighlightBackground: rgba(234, 92, 0, 0.33);
-  --vscode-editorCursor-foreground: #f8f8f0;
-  --vscode-editorWhitespace-foreground: #3b3a32;
-  --vscode-editorIndentGuide-background: #404040;
-  --vscode-editorIndentGuide-activeBackground: rgba(157, 85, 15, 0.69);
-  --vscode-editorLineNumber-foreground: #858585;
-  --vscode-editorActiveLineNumber-foreground: #c6c6c6;
-  --vscode-editorLineNumber-activeForeground: #c6c6c6;
-  --vscode-editorRuler-foreground: #5a5a5a;
-  --vscode-editorCodeLens-foreground: #999999;
-  --vscode-editorBracketMatch-background: rgba(0, 100, 0, 0.1);
-  --vscode-editorBracketMatch-border: #888888;
-  --vscode-editorOverviewRuler-border: rgba(127, 127, 127, 0.3);
-  --vscode-editorGutter-background: #272822;
-  --vscode-editorUnnecessaryCode-opacity: rgba(0, 0, 0, 0.67);
-  --vscode-editorGhostText-foreground: rgba(255, 255, 255, 0.34);
-  --vscode-editorOverviewRuler-rangeHighlightForeground: rgba(0, 122, 204, 0.6);
-  --vscode-editorOverviewRuler-errorForeground: rgba(255, 18, 18, 0.7);
-  --vscode-editorOverviewRuler-warningForeground: #cca700;
-  --vscode-editorOverviewRuler-infoForeground: #3794ff;
-  --vscode-editorBracketHighlight-foreground1: #ffd700;
-  --vscode-editorBracketHighlight-foreground2: #da70d6;
-  --vscode-editorBracketHighlight-foreground3: #179fff;
-  --vscode-editorBracketHighlight-foreground4: rgba(0, 0, 0, 0);
-  --vscode-editorBracketHighlight-foreground5: rgba(0, 0, 0, 0);
-  --vscode-editorBracketHighlight-foreground6: rgba(0, 0, 0, 0);
-  --vscode-editorBracketHighlight-unexpectedBracket-foreground: rgba(255, 18, 18, 0.8);
-  --vscode-editorBracketPairGuide-background1: rgba(0, 0, 0, 0);
-  --vscode-editorBracketPairGuide-background2: rgba(0, 0, 0, 0);
-  --vscode-editorBracketPairGuide-background3: rgba(0, 0, 0, 0);
-  --vscode-editorBracketPairGuide-background4: rgba(0, 0, 0, 0);
-  --vscode-editorBracketPairGuide-background5: rgba(0, 0, 0, 0);
-  --vscode-editorBracketPairGuide-background6: rgba(0, 0, 0, 0);
-  --vscode-editorBracketPairGuide-activeBackground1: rgba(0, 0, 0, 0);
-  --vscode-editorBracketPairGuide-activeBackground2: rgba(0, 0, 0, 0);
-  --vscode-editorBracketPairGuide-activeBackground3: rgba(0, 0, 0, 0);
-  --vscode-editorBracketPairGuide-activeBackground4: rgba(0, 0, 0, 0);
-  --vscode-editorBracketPairGuide-activeBackground5: rgba(0, 0, 0, 0);
-  --vscode-editorBracketPairGuide-activeBackground6: rgba(0, 0, 0, 0);
-  --vscode-editorUnicodeHighlight-border: #bd9b03;
-  --vscode-editorOverviewRuler-bracketMatchForeground: #a0a0a0;
-  --vscode-peekViewTitle-background: rgba(55, 148, 255, 0.1);
-  --vscode-peekViewTitleLabel-foreground: #ffffff;
-  --vscode-peekViewTitleDescription-foreground: rgba(204, 204, 204, 0.7);
-  --vscode-peekView-border: #3794ff;
-  --vscode-peekViewResult-background: #252526;
-  --vscode-peekViewResult-lineForeground: #bbbbbb;
-  --vscode-peekViewResult-fileForeground: #ffffff;
-  --vscode-peekViewResult-selectionBackground: rgba(51, 153, 255, 0.2);
-  --vscode-peekViewResult-selectionForeground: #ffffff;
-  --vscode-peekViewEditor-background: #001f33;
-  --vscode-peekViewEditorGutter-background: #001f33;
-  --vscode-peekViewResult-matchHighlightBackground: rgba(234, 92, 0, 0.3);
-  --vscode-peekViewEditor-matchHighlightBackground: rgba(255, 143, 0, 0.6);
-  --vscode-editorMarkerNavigationError-background: #f14c4c;
-  --vscode-editorMarkerNavigationError-headerBackground: rgba(241, 76, 76, 0.1);
-  --vscode-editorMarkerNavigationWarning-background: #cca700;
-  --vscode-editorMarkerNavigationWarning-headerBackground: rgba(204, 167, 0, 0.1);
-  --vscode-editorMarkerNavigationInfo-background: #3794ff;
-  --vscode-editorMarkerNavigationInfo-headerBackground: rgba(55, 148, 255, 0.1);
-  --vscode-editorMarkerNavigation-background: #272822;
-  --vscode-editor-foldBackground: rgba(73, 72, 62, 0.3);
-  --vscode-editorGutter-foldingControlForeground: #c5c5c5;
-  --vscode-symbolIcon-arrayForeground: #cccccc;
-  --vscode-symbolIcon-booleanForeground: #cccccc;
-  --vscode-symbolIcon-classForeground: #ee9d28;
-  --vscode-symbolIcon-colorForeground: #cccccc;
-  --vscode-symbolIcon-constantForeground: #cccccc;
-  --vscode-symbolIcon-constructorForeground: #b180d7;
-  --vscode-symbolIcon-enumeratorForeground: #ee9d28;
-  --vscode-symbolIcon-enumeratorMemberForeground: #75beff;
-  --vscode-symbolIcon-eventForeground: #ee9d28;
-  --vscode-symbolIcon-fieldForeground: #75beff;
-  --vscode-symbolIcon-fileForeground: #cccccc;
-  --vscode-symbolIcon-folderForeground: #cccccc;
-  --vscode-symbolIcon-functionForeground: #b180d7;
-  --vscode-symbolIcon-interfaceForeground: #75beff;
-  --vscode-symbolIcon-keyForeground: #cccccc;
-  --vscode-symbolIcon-keywordForeground: #cccccc;
-  --vscode-symbolIcon-methodForeground: #b180d7;
-  --vscode-symbolIcon-moduleForeground: #cccccc;
-  --vscode-symbolIcon-namespaceForeground: #cccccc;
-  --vscode-symbolIcon-nullForeground: #cccccc;
-  --vscode-symbolIcon-numberForeground: #cccccc;
-  --vscode-symbolIcon-objectForeground: #cccccc;
-  --vscode-symbolIcon-operatorForeground: #cccccc;
-  --vscode-symbolIcon-packageForeground: #cccccc;
-  --vscode-symbolIcon-propertyForeground: #cccccc;
-  --vscode-symbolIcon-referenceForeground: #cccccc;
-  --vscode-symbolIcon-snippetForeground: #cccccc;
-  --vscode-symbolIcon-stringForeground: #cccccc;
-  --vscode-symbolIcon-structForeground: #cccccc;
-  --vscode-symbolIcon-textForeground: #cccccc;
-  --vscode-symbolIcon-typeParameterForeground: #cccccc;
-  --vscode-symbolIcon-unitForeground: #cccccc;
-  --vscode-symbolIcon-variableForeground: #75beff;
-  --vscode-editorSuggestWidget-background: #252526;
-  --vscode-editorSuggestWidget-border: #454545;
-  --vscode-editorSuggestWidget-foreground: #f8f8f2;
-  --vscode-editorSuggestWidget-selectedForeground: #ffffff;
-  --vscode-editorSuggestWidget-selectedBackground: #094771;
-  --vscode-editorSuggestWidget-highlightForeground: #18a3ff;
-  --vscode-editorSuggestWidget-focusHighlightForeground: #18a3ff;
-  --vscode-editorSuggestWidgetStatus-foreground: rgba(248, 248, 242, 0.5);
-  --vscode-editor-linkedEditingBackground: rgba(255, 0, 0, 0.3);
-  --vscode-editorHoverWidget-highlightForeground: #18a3ff;
-  --vscode-editor-wordHighlightBackground: rgba(87, 87, 87, 0.72);
-  --vscode-editor-wordHighlightStrongBackground: rgba(0, 73, 114, 0.72);
-  --vscode-editorOverviewRuler-wordHighlightForeground: rgba(160, 160, 160, 0.8);
-  --vscode-editorOverviewRuler-wordHighlightStrongForeground: rgba(192, 160, 192, 0.8);
-}
-.dark-theme .monaco-editor .mtk1 {
-  color: #ffffff !important;
-}
-.dark-theme .monaco-editor .mtk2 {
-  color: #002240 !important;
-}
-.dark-theme .monaco-editor .mtk3 {
-  color: #cc6666 !important;
-}
-.dark-theme .monaco-editor .mtk4 {
-  color: #9cdcfe !important;
-}
-.dark-theme .monaco-editor .mtk5 {
-  color: #ce9178 !important;
-}
-.dark-theme .monaco-editor .mtk6 {
-  color: #d4d4d4 !important;
-}
-.dark-theme .monaco-editor .mtk7 {
-  color: #b5cea8 !important;
-}
-.dark-theme .monaco-editor .mtk8 {
-  color: #608b4e !important;
-}
-.dark-theme .monaco-editor .mtk9 {
-  color: #0088ff !important;
-}
-.dark-theme .monaco-editor .mtk10 {
-  color: #569cd6 !important;
-}
-.dark-theme .monaco-editor .mtk11 {
-  color: #ff628c !important;
-}
-.dark-theme .monaco-editor .mtk12 {
-  color: #dcdcdc !important;
-}
-.dark-theme .monaco-editor .mtk13 {
-  color: #808080 !important;
-}
-.dark-theme .monaco-editor .mtk14 {
-  color: #ffdd00 !important;
-}
-.dark-theme .monaco-editor .mtk15 {
-  color: #80fcff !important;
-}
-.dark-theme .monaco-editor .mtk16 {
-  color: #f44747 !important;
-}
-.dark-theme .monaco-editor .mtk17 {
-  color: #f8f8f8 !important;
-}
-.dark-theme .monaco-editor .mtk18 {
-  color: #800f00 !important;
-}
-.dark-theme .monaco-editor .mtk19 {
-  color: #ff9d00 !important;
-}
-.dark-theme .monaco-editor .mtk20 {
-  color: #c586c0 !important;
-}
-.dark-theme .monaco-editor .mtk21 {
-  color: #c1afff !important;
-}
-.dark-theme .monaco-editor .mtk22 {
-  color: #806f00 !important;
-}
-.dark-theme .monaco-editor .mtk23 {
-  color: #4c0900 !important;
-}
-.dark-theme .monaco-editor .mtk24 {
-  color: #c8e4fd !important;
-}
-.dark-theme .monaco-editor .mtk25 {
-  color: #001221 !important;
-}
-.dark-theme .monaco-editor .mtk26 {
-  color: #154f00 !important;
-}
-.dark-theme .monaco-editor .mtk27 {
-  color: #b8ffd9 !important;
-}
-.dark-theme .monaco-editor .mtk28 {
-  color: #130d26 !important;
-}
-.dark-theme .monaco-editor .mtk29 {
-  color: #004480 !important;
-}
-.dark-theme .monaco-editor .mtk30 {
-  color: #8fddf6 !important;
-}
-.dark-theme .monaco-editor .mtk31 {
-  color: #eb939a !important;
-}
-.dark-theme .monaco-editor .mtk32 {
-  color: #000e1a !important;
-}
-.dark-theme .monaco-editor .mtk33 {
-  color: #ffee80 !important;
-}
-.dark-theme .monaco-editor .mtk34 {
-  color: #f6aa11 !important;
-}
-.dark-theme .monaco-editor .mtk35 {
-  color: #8996a8 !important;
-}
-.dark-theme .monaco-editor .mtk36 {
-  color: #afc4db !important;
-}
-.dark-theme .monaco-editor .mtk37 {
-  color: #f6f080 !important;
-}
-.dark-theme .monaco-editor .mtk38 {
-  color: #edf080 !important;
-}
-.dark-theme .monaco-editor .mtk39 {
-  color: #a79873 !important;
-}
-.dark-theme .monaco-editor .mtk40 {
-  color: #9effff !important;
-}
-.dark-theme .monaco-editor .mtk41 {
-  color: #5fe461 !important;
-}
-.dark-theme .monaco-editor .mtk42 {
-  color: #ffb454 !important;
-}
-.dark-theme .monaco-editor .mtk43 {
-  color: #73817d !important;
-}
-.dark-theme .monaco-editor .mtk44 {
-  color: #dd6a6f !important;
-}
-.dark-theme .monaco-editor .mtk45 {
-  color: #5bb498 !important;
-}
-.dark-theme .monaco-editor .mtk46 {
-  color: #909090 !important;
-}
-.dark-theme .monaco-editor .mtk47 {
-  color: #778899 !important;
-}
-.dark-theme .monaco-editor .mtk48 {
-  color: #ff00ff !important;
-}
-.dark-theme .monaco-editor .mtk49 {
-  color: #e1efff !important;
-}
-.dark-theme .monaco-editor .mtk50 {
-  color: #b46695 !important;
-}
-.dark-theme .monaco-editor .mtk51 {
-  color: #223545 !important;
-}
-.dark-theme .monaco-editor .mtk52 {
-  color: #3ad900 !important;
-}
-.dark-theme .monaco-editor .mtk53 {
-  color: #80ff82 !important;
-}
-.dark-theme .monaco-editor .mtk54 {
-  color: #edef7d !important;
-}
-.dark-theme .monaco-editor .mtk55 {
-  color: #9eff80 !important;
-}
-.dark-theme .monaco-editor .mtk56 {
-  color: #80ffc2 !important;
-}
-.dark-theme .monaco-editor .mtk57 {
-  color: #ff0000 !important;
-}
-.dark-theme .monaco-editor .mtk58 {
-  color: #80ffbb !important;
-}
-.dark-theme .monaco-editor .mtk59 {
-  color: #ffb054 !important;
-}
-.dark-theme .monaco-editor .mtk60 {
-  color: #ff1e00 !important;
-}
-.dark-theme .monaco-editor .mtk61 {
-  color: #9df39f !important;
-}
-.dark-theme .monaco-editor .mtk62 {
-  color: #4f76ac !important;
-}
-.dark-theme .monaco-editor .mtk63 {
-  color: #3dc9b0 !important;
-}
-.dark-theme .monaco-editor .mtk64 {
-  color: #74b0df !important;
-}
-.dark-theme .monaco-editor .mtk65 {
-  color: #cccccc !important;
-}
-
-.dark-theme .monaco-editor .bracket-highlighting-0 {
-  color: #e4a9c6 !important;
-}
-.dark-theme .monaco-editor .bracket-highlighting-1 {
-  color: #e8c1b3 !important;
-}
-.dark-theme .monaco-editor .bracket-highlighting-2 {
-  color: #e7ddcb !important;
-}
-.dark-theme .monaco-editor .bracket-highlighting-3 {
-  color: #b6dec2 !important;
-}
-.dark-theme .monaco-editor .bracket-highlighting-4 {
-  color: #a4c2f8 !important;
-}
-.dark-theme .monaco-editor .bracket-highlighting-5 {
-  color: #ccb9f6 !important;
-}
-
-.dark-theme .mtki {
-  font-style: italic;
-}
-.dark-theme .mtkb {
-  font-weight: bold;
-}
-.dark-theme .mtku {
-  text-decoration: underline;
-  text-underline-position: under;
-}
-.dark-theme .mtks {
-  text-decoration: line-through;
-}
-.dark-theme .mtks.mtku {
-  text-decoration: underline line-through;
-  text-underline-position: under;
-}
-
-/*
-Custom code for dark style of other elements
-*/
-
-.dark-theme .nav {
-  --vscode-breadcrumb-background: #2B2B2B;
-  --vscode-breadcrumb-foreground: #E6E1DC;
-}
-
-:root .dark-theme { /* TODO: is this correct? */
-  --vscode-editor-background: #2B2B2B;
-  --vscode-editor-foreground: #E6E1DC;
-  --vscode-textCodeBlock-background: #2B2B2B;
-  --vscode-textCodeBlock-foreground: #E6E1DC;
-  --vscode-editorHoverWidget-background: #3a3a3a;
-  --vscode-editorHoverWidget-foreground: #E6E1DC;
-  --vscode-notifications-background: #3a3a3a;
-  --vscode-notifications-foreground: #E6E1DC;
-  --vscode-editor-selectionBackground: #3572d3;
-}
-
-.dark-theme .infoview {
-  color: #E6E1DC !important;
-  background-color: #2B2B2B !important;
-}
-
-.dark-theme .trace-line:hover {
-  background-color: #196fa9;
-}
-
-.dark-theme svg.logo {
-  filter: invert(1);
-}
-
-.dark-theme .app {
-  background-color: #2B2B2B;
-}
-
-/* .dark-theme .monaco-editor .view-lines .view-line {
-  background-color: #303030;
-}
- */
-
-.dark-theme .monaco-editor .view-overlays .current-line {
-    border: none !important;
-}
-
-.dark-theme .monaco-editor .lines-content .core-guide-indent-active {
-    box-shadow: none;
-}
-
-.dark-theme .monaco-aria-container {
-  background-color: #3a3a3a;
-}
-
-.dark-theme .notification-toasts {
-  color: #E6E1DC !important;
-  background-color: #3a3a3a !important;
-}
-
-.dark-theme .quick-input-widget {
-  color: #E6E1DC !important;
-  background-color: #3a3a3a !important;
-}
-
-.dark-theme .quick-input-widget .monaco-highlighted-label .highlight,
-.dark-theme .quick-input-widget .monaco-highlighted-label .highlight {
-	color: #0066BF;
-}
-
-.dark-theme .vs .quick-input-widget .monaco-list-row.focused .monaco-highlighted-label .highlight,
-.dark-theme .vs .quick-input-widget .monaco-list-row.focused .monaco-highlighted-label .highlight {
-	color: #9DDDFF;
-}
-
-.dark-theme .vs-dark .quick-input-widget .monaco-highlighted-label .highlight,
-.dark-theme .vs-dark .quick-input-widget .monaco-highlighted-label .highlight {
-	color: #0097fb;
-}
-
-.dark-theme .hc-black .quick-input-widget .monaco-highlighted-label .highlight,
-.dark-theme .hc-black .quick-input-widget .monaco-highlighted-label .highlight {
-	color: #F38518;
-}
-
-.dark-theme .hc-light .quick-input-widget .monaco-highlighted-label .highlight,
-.dark-theme .hc-light .quick-input-widget .monaco-highlighted-label .highlight {
-	color: #0F4A85;
-}
-
-.dark-theme .monaco-keybinding > .monaco-keybinding-key {
-	background-color: rgba(221, 221, 221, 0.4);
-	border: solid 1px rgba(204, 204, 204, 0.4);
-	border-bottom-color: rgba(187, 187, 187, 0.4);
-	box-shadow: inset 0 -1px 0 rgba(187, 187, 187, 0.4);
-	color: #b4b4b4;
-}
-
-
-.dark-theme .monaco-list.list_id_3 .monaco-list-row.focused { color:  #ffffff; }
-.dark-theme .monaco-list.list_id_3 .monaco-list-row.focused:hover { color:  #ffffff; }
-.dark-theme .monaco-list.list_id_3 .monaco-list-row.focused .codicon { color:  #ffffff; }
-.dark-theme .monaco-list.list_id_3 .monaco-list-row.focused { background-color:  #0060c0; }
-.dark-theme .monaco-list.list_id_3 .monaco-list-row.focused:hover { background-color:  #0060c0; }
-
-.dark-theme .monaco-list.list_id_3 .monaco-list-rows { background: #3a3a3a !important; }
-.dark-theme .monaco-list.list_id_3 .monaco-list-row { background: #494949 !important; }
-.dark-theme .monaco-list.list_id_3 .monaco-list-row:hover { background: #5f5f5f !important; }
-
-.dark-theme .nav .dropdown {
-  color: #E6E1DC !important;
-  background-color: #3a3a3a !important;
-}
-
-.dark-theme .monaco-editor .monaco-hover code {
-    background-color: rgba(10, 10, 10, 0.4);
-    color: #E6E1DC !important;
-}
diff --git a/client/src/monacoSetup.ts b/client/src/monacoSetup.ts
index 2a2f27c9..f20af0c3 100644
--- a/client/src/monacoSetup.ts
+++ b/client/src/monacoSetup.ts
@@ -1,6 +1,5 @@
 import { Registry } from 'monaco-textmate' // peer dependency
 import { wireTmGrammars } from 'monaco-editor-textmate'
-import * as lightPlusTheme from './css/theme/lightPlus.json'
 import * as leanSyntax from './syntaxes/lean.json'
 import * as leanMarkdownSyntax from './syntaxes/lean-markdown.json'
 import * as codeblockSyntax from './syntaxes/codeblock.json'
@@ -13,6 +12,10 @@ import getMessageServiceOverride from 'vscode/service-override/messages';
 //@ts-ignore
 import onigasmUrl from 'onigasm/lib/onigasm.wasm?url'
 
+// import * as lightPlusTheme from './css/theme/lightPlus.json'
+// import * as githubDarkTheme from './css/theme/GitHubDark.json'
+
+
 export function monacoSetup () {
 
   StandaloneServices.initialize({
@@ -26,7 +29,10 @@ export function monacoSetup () {
   const grammars = new Map()
   grammars.set('lean4', 'source.lean')
 
-  monaco.editor.defineTheme('vs-code-theme-converted', lightPlusTheme as any);
+  //monaco.editor.defineTheme('lightPlus', lightPlusTheme as any);
+  // monaco.editor.defineTheme('GithubDark', githubDarkTheme as any);
+
+  // monaco.editor.setTheme('GithubDark')
 
   // register Monaco languages
   monaco.languages.register({