From 7103601403d695f5342bf342b0987184ac1b8ff0 Mon Sep 17 00:00:00 2001 From: Jeff Baars Date: Mon, 18 Oct 2021 13:41:26 -0700 Subject: [PATCH 1/3] Added Solarized dark and light themes to code editor. --- src/ScriptEditor/ui/OptionsModal.tsx | 4 +- src/ScriptEditor/ui/themes.ts | 131 +++++++++++++++++++++++++++ 2 files changed, 134 insertions(+), 1 deletion(-) diff --git a/src/ScriptEditor/ui/OptionsModal.tsx b/src/ScriptEditor/ui/OptionsModal.tsx index 55ff9bd54..a4a3bbacb 100644 --- a/src/ScriptEditor/ui/OptionsModal.tsx +++ b/src/ScriptEditor/ui/OptionsModal.tsx @@ -45,7 +45,9 @@ export function OptionsModal(props: IProps): React.ReactElement { dark light monokai - + solarish-dark + solarish-light + diff --git a/src/ScriptEditor/ui/themes.ts b/src/ScriptEditor/ui/themes.ts index 982498113..374031880 100644 --- a/src/ScriptEditor/ui/themes.ts +++ b/src/ScriptEditor/ui/themes.ts @@ -63,4 +63,135 @@ export async function loadThemes(monaco: { editor: any }): Promise { "editor.selectionHighlightBorder": "#222218", }, }); + + monaco.editor.defineTheme("solarish-dark", { + base: "vs-dark", + inherit: true, + rules: [ + { + background: "002b36", + token: "", + }, + { + foreground: "586e75", + token: "comment", + }, + { + foreground: "b58900", + token: "string", + }, + { + token: "number", + foreground: "2aa198", + }, + { + token: "otherkeyvars", + foreground: "ae81ff", + }, + { + foreground: "93a1a1", + token: "function", + }, + { + foreground: "d33682", + token: "keyword", + }, + { + token: "storage.type.function.js", + foreground: "ae81ff", + }, + { + token: "ns", + foreground: "97d92b", + }, + { + token: "netscriptfunction", + foreground: "cb4b16", + }, + { + token: "otherkeywords", + foreground: "cb4b16", + }, + { + token: "this", + foreground: "fd971f", + }, + ], + colors: { + "editor.foreground": "#839496", + "editor.background": "#002b36", + "editor.selectionBackground": "#073642", + "editor.lineHighlightBackground": "#073642", + "editorCursor.foreground": "#F8F8F0", + "editorWhitespace.foreground": "#3B3A32", + "editorIndentGuide.activeBackground": "#9D550FB0", + "editor.selectionHighlightBorder": "#222218", + }, + }); + + monaco.editor.defineTheme("solarish-light", { + base: "vs", + inherit: true, + rules: [ + { + foreground: "657b83", + background: "fdf6e3", + token: "", + }, + { + foreground: "93a1a1", + token: "comment", + }, + { + foreground: "b58900", + token: "string", + }, + { + token: "number", + foreground: "2aa198", + }, + { + token: "otherkeyvars", + foreground: "ae81ff", + }, + { + foreground: "93a1a1", + token: "function", + }, + { + foreground: "d33682", + token: "keyword", + }, + { + token: "storage.type.function.js", + foreground: "ae81ff", + }, + { + token: "ns", + foreground: "97d92b", + }, + { + token: "netscriptfunction", + foreground: "cb4b16", + }, + { + token: "otherkeywords", + foreground: "cb4b16", + }, + { + token: "this", + foreground: "fd971f", + }, + ], + colors: { + "editor.foreground": "#657b83", + "editor.background": "#fdf6e3", + "editor.selectionBackground": "#eee8d5", + "editor.lineHighlightBackground": "#073642", + "editorCursor.foreground": "#657b83", + "editorWhitespace.foreground": "#3B3A32", + "editorIndentGuide.activeBackground": "#073642", + "editor.selectionHighlightBorder": "#073642", + }, + }); } From fd9d8d5c8a765ed58830b7a98c01974121386aa5 Mon Sep 17 00:00:00 2001 From: Jeff Baars Date: Mon, 18 Oct 2021 16:20:41 -0700 Subject: [PATCH 2/3] Added solarish-dark and solarish-light themes to code editor based on Solarized: https://ethanschoonover.com/solarized/ --- src/ScriptEditor/ui/themes.ts | 56 ++++++++++++++++++++--------------- 1 file changed, 32 insertions(+), 24 deletions(-) diff --git a/src/ScriptEditor/ui/themes.ts b/src/ScriptEditor/ui/themes.ts index 374031880..864aa4f18 100644 --- a/src/ScriptEditor/ui/themes.ts +++ b/src/ScriptEditor/ui/themes.ts @@ -77,7 +77,7 @@ export async function loadThemes(monaco: { editor: any }): Promise { token: "comment", }, { - foreground: "b58900", + foreground: "2aa198", token: "string", }, { @@ -86,35 +86,39 @@ export async function loadThemes(monaco: { editor: any }): Promise { }, { token: "otherkeyvars", - foreground: "ae81ff", + foreground: "268bd2", }, { - foreground: "93a1a1", + foreground: "268bd2", token: "function", }, { - foreground: "d33682", + foreground: "859900", token: "keyword", }, { token: "storage.type.function.js", - foreground: "ae81ff", + foreground: "cb4b16", }, { token: "ns", - foreground: "97d92b", + foreground: "cb4b16", }, { token: "netscriptfunction", - foreground: "cb4b16", + foreground: "268bd2", }, { token: "otherkeywords", - foreground: "cb4b16", + foreground: "268bd2", + }, + { + token: "type.identifier.js", + foreground: "b58900", }, { token: "this", - foreground: "fd971f", + foreground: "cb4b16", }, ], colors: { @@ -122,8 +126,8 @@ export async function loadThemes(monaco: { editor: any }): Promise { "editor.background": "#002b36", "editor.selectionBackground": "#073642", "editor.lineHighlightBackground": "#073642", - "editorCursor.foreground": "#F8F8F0", - "editorWhitespace.foreground": "#3B3A32", + "editorCursor.foreground": "#819090", + "editorWhitespace.foreground": "#073642", "editorIndentGuide.activeBackground": "#9D550FB0", "editor.selectionHighlightBorder": "#222218", }, @@ -139,11 +143,11 @@ export async function loadThemes(monaco: { editor: any }): Promise { token: "", }, { - foreground: "93a1a1", + foreground: "586e75", token: "comment", }, { - foreground: "b58900", + foreground: "2aa198", token: "string", }, { @@ -152,45 +156,49 @@ export async function loadThemes(monaco: { editor: any }): Promise { }, { token: "otherkeyvars", - foreground: "ae81ff", + foreground: "268bd2", }, { - foreground: "93a1a1", + foreground: "268bd2", token: "function", }, { - foreground: "d33682", + foreground: "859900", token: "keyword", }, { token: "storage.type.function.js", - foreground: "ae81ff", + foreground: "bc4b16", }, { token: "ns", - foreground: "97d92b", + foreground: "cb4b16", }, { token: "netscriptfunction", - foreground: "cb4b16", + foreground: "268bd2", }, { token: "otherkeywords", - foreground: "cb4b16", + foreground: "268bd2", + }, + { + token: "type.identifier.js", + foreground: "b58900", }, { token: "this", - foreground: "fd971f", + foreground: "cb4b16", }, ], colors: { "editor.foreground": "#657b83", "editor.background": "#fdf6e3", "editor.selectionBackground": "#eee8d5", - "editor.lineHighlightBackground": "#073642", + "editor.lineHighlightBackground": "#eee8d5", "editorCursor.foreground": "#657b83", - "editorWhitespace.foreground": "#3B3A32", - "editorIndentGuide.activeBackground": "#073642", + "editorWhitespace.foreground": "#eee8d5", + "editorIndentGuide.activeBackground": "#eee8d5", "editor.selectionHighlightBorder": "#073642", }, }); From ab60b411caace5546262d226ca2678d844f014ea Mon Sep 17 00:00:00 2001 From: Jeff Baars Date: Mon, 18 Oct 2021 16:58:23 -0700 Subject: [PATCH 3/3] Bracket highlighting per Solarized example js images --- src/ScriptEditor/ui/themes.ts | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/src/ScriptEditor/ui/themes.ts b/src/ScriptEditor/ui/themes.ts index 864aa4f18..3e8300997 100644 --- a/src/ScriptEditor/ui/themes.ts +++ b/src/ScriptEditor/ui/themes.ts @@ -77,12 +77,12 @@ export async function loadThemes(monaco: { editor: any }): Promise { token: "comment", }, { - foreground: "2aa198", + foreground: "00afaf", token: "string", }, { token: "number", - foreground: "2aa198", + foreground: "00afaf", }, { token: "otherkeyvars", @@ -116,6 +116,14 @@ export async function loadThemes(monaco: { editor: any }): Promise { token: "type.identifier.js", foreground: "b58900", }, + { + token: "delimiter.square.js", + foreground: "0087ff", + }, + { + token: "delimiter.bracket.js", + foreground: "0087ff", + }, { token: "this", foreground: "cb4b16", @@ -186,6 +194,14 @@ export async function loadThemes(monaco: { editor: any }): Promise { token: "type.identifier.js", foreground: "b58900", }, + { + token: "delimiter.square.js", + foreground: "0087ff", + }, + { + token: "delimiter.bracket.js", + foreground: "0087ff", + }, { token: "this", foreground: "cb4b16",