diff --git a/src/renderer/components/monaco-editor/index.ts b/src/renderer/components/monaco-editor/index.ts index 5f9e47d46b..e1b3243063 100644 --- a/src/renderer/components/monaco-editor/index.ts +++ b/src/renderer/components/monaco-editor/index.ts @@ -21,3 +21,4 @@ export * from "./monaco-editor"; export * from "./monaco-validators"; +export * from "./monaco-themes"; diff --git a/src/renderer/components/monaco-editor/monaco-editor.tsx b/src/renderer/components/monaco-editor/monaco-editor.tsx index c8c59d574a..80b6172964 100644 --- a/src/renderer/components/monaco-editor/monaco-editor.tsx +++ b/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 { return this.editor?.getValue(opts) ?? ""; } - focus(){ + focus() { this.editor?.focus(); } diff --git a/src/renderer/components/monaco-editor/monaco-theme.clouds-midnight.json b/src/renderer/components/monaco-editor/monaco-theme.clouds-midnight.json new file mode 100644 index 0000000000..48696d8d0a --- /dev/null +++ b/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" + } +} \ No newline at end of file diff --git a/src/renderer/components/monaco-editor/monaco-themes.ts b/src/renderer/components/monaco-editor/monaco-themes.ts new file mode 100644 index 0000000000..88d3795010 --- /dev/null +++ b/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 { + return import(`./monaco-theme.${name}.json`); +} diff --git a/src/renderer/themes/lens-dark.json b/src/renderer/themes/lens-dark.json index c24f8fdde8..720eef4717 100644 --- a/src/renderer/themes/lens-dark.json +++ b/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",