reverted "clouds midnight" as default dark theme for monaco-editor

Signed-off-by: Roman <ixrock@gmail.com>

src/renderer/components/monaco-editor/index.ts

@@ -21,3 +21,4 @@
 
 export * from "./monaco-editor";
 export * from "./monaco-validators";
+export * from "./monaco-themes";

src/renderer/components/monaco-editor/monaco-editor.tsx

@@ -24,12 +24,15 @@ import React from "react";
 import { action, computed, makeObservable, observable, reaction } from "mobx";
 import { observer } from "mobx-react";
 import { editor, Uri } from "monaco-editor";
-import { ThemeStore } from "../../theme.store";
-import { UserStore } from "../../../common/user-store";
-import { cssNames, disposer, toJS } from "../../utils";
+import { registerCustomThemes } from "./monaco-themes";
 import { MonacoValidator, monacoValidators } from "./monaco-validators";
+import { cssNames, disposer, toJS } from "../../utils";
+import { UserStore } from "../../../common/user-store";
+import { ThemeStore } from "../../theme.store";
 import debounce from "lodash/debounce";
 
+registerCustomThemes(); // setup
+
 export interface MonacoEditorProps {
   id?: string; // associating editor's ID with created model.uri
   value?: string; // initial text value for editor
@@ -238,7 +241,7 @@ export class MonacoEditor extends React.Component<MonacoEditorProps> {
     return this.editor?.getValue(opts) ?? "";
   }
 
-  focus(){
+  focus() {
     this.editor?.focus();
   }
 

src/renderer/components/monaco-editor/monaco-theme.clouds-midnight.json

@@ -0,0 +1,128 @@
+{
+  "name": "clouds-midnight",
+  "base": "vs-dark",
+  "inherit": true,
+  "rules": [
+    {
+      "background": "191919",
+      "token": ""
+    },
+    {
+      "foreground": "3c403b",
+      "token": "comment"
+    },
+    {
+      "foreground": "5d90cd",
+      "token": "string"
+    },
+    {
+      "foreground": "46a609",
+      "token": "constant.numeric"
+    },
+    {
+      "foreground": "39946a",
+      "token": "constant.language"
+    },
+    {
+      "foreground": "927c5d",
+      "token": "keyword"
+    },
+    {
+      "foreground": "927c5d",
+      "token": "support.constant.property-value"
+    },
+    {
+      "foreground": "927c5d",
+      "token": "constant.other.color"
+    },
+    {
+      "foreground": "366f1a",
+      "token": "keyword.other.unit"
+    },
+    {
+      "foreground": "a46763",
+      "token": "entity.other.attribute-name.html"
+    },
+    {
+      "foreground": "4b4b4b",
+      "token": "keyword.operator"
+    },
+    {
+      "foreground": "e92e2e",
+      "token": "storage"
+    },
+    {
+      "foreground": "858585",
+      "token": "entity.other.inherited-class"
+    },
+    {
+      "foreground": "606060",
+      "token": "entity.name.tag"
+    },
+    {
+      "foreground": "a165ac",
+      "token": "constant.character.entity"
+    },
+    {
+      "foreground": "a165ac",
+      "token": "support.class.js"
+    },
+    {
+      "foreground": "606060",
+      "token": "entity.other.attribute-name"
+    },
+    {
+      "foreground": "e92e2e",
+      "token": "meta.selector.css"
+    },
+    {
+      "foreground": "e92e2e",
+      "token": "entity.name.tag.css"
+    },
+    {
+      "foreground": "e92e2e",
+      "token": "entity.other.attribute-name.id.css"
+    },
+    {
+      "foreground": "e92e2e",
+      "token": "entity.other.attribute-name.class.css"
+    },
+    {
+      "foreground": "616161",
+      "token": "meta.property-name.css"
+    },
+    {
+      "foreground": "e92e2e",
+      "token": "support.function"
+    },
+    {
+      "foreground": "ffffff",
+      "background": "e92e2e",
+      "token": "invalid"
+    },
+    {
+      "foreground": "e92e2e",
+      "token": "punctuation.section.embedded"
+    },
+    {
+      "foreground": "606060",
+      "token": "punctuation.definition.tag"
+    },
+    {
+      "foreground": "a165ac",
+      "token": "constant.other.color.rgb-value.css"
+    },
+    {
+      "foreground": "a165ac",
+      "token": "support.constant.property-value.css"
+    }
+  ],
+  "colors": {
+    "editor.foreground": "#929292",
+    "editor.background": "#191919",
+    "editor.selectionBackground": "#000000",
+    "editor.lineHighlightBackground": "#D7D7D708",
+    "editorCursor.foreground": "#7DA5DC",
+    "editorWhitespace.foreground": "#BFBFBF"
+  }
+}

src/renderer/components/monaco-editor/monaco-themes.ts

@@ -0,0 +1,43 @@
+/**
+ * Copyright (c) 2021 OpenLens Authors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of
+ * this software and associated documentation files (the "Software"), to deal in
+ * the Software without restriction, including without limitation the rights to
+ * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+ * the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+ * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+ * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+ * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+ * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+// Monaco editor themes customization
+import { editor } from "monaco-editor";
+import cloudsMidnight from "./monaco-theme.clouds-midnight.json";
+
+export interface MonacoCustomTheme extends editor.IStandaloneThemeData {
+  name?: string;
+}
+
+// Registered names could be then used in "themes/*.json" in "{monacoTheme: [name]}"
+export const customThemes = {
+  [cloudsMidnight.name]: cloudsMidnight as MonacoCustomTheme,
+};
+
+export function registerCustomThemes(): void {
+  Object.entries(customThemes).forEach(([name, theme]) => {
+    editor.defineTheme(name, theme);
+  });
+}
+
+export async function loadCustomTheme(name: string): Promise<MonacoCustomTheme> {
+  return import(`./monaco-theme.${name}.json`);
+}

src/renderer/themes/lens-dark.json

@@ -3,7 +3,7 @@
   "type": "dark",
   "description": "Original Lens dark theme",
   "author": "Mirantis",
-  "monacoTheme": "vs-dark",
+  "monacoTheme": "clouds-midnight",
   "colors": {
     "blue": "#3d90ce",
     "magenta": "#c93dce",