Build matching color schemes to editor

engines/brainfuck/constants.ts

@@ -71,10 +71,10 @@ export const sampleProgram = [
 export const editorTokensProvider: MonacoTokensProvider = {
   tokenizer: {
     root: [
-      [/[-\+]/, "operator"],
+      [/[-\+]/, "plain"],
-      [/[<>]/, "annotation"],
+      [/[<>]/, "green"],
-      [/[\[\]]/, "keyword"],
+      [/[\[\]]/, "violet"],
-      [/[\,\.]/, "type.identifier"],
+      [/[\,\.]/, "orange"],
     ],
   },
   defaultToken: "comment",

ui/code-editor/index.tsx

@@ -8,6 +8,9 @@ import {
   MonacoInstance,
 } from "./monaco-utils";
 import { useEditorBreakpoints } from "./use-editor-breakpoints";
+import darkTheme from "./themes/dark.json";
+import lightTheme from "./themes/light.json";
+import { useDarkMode } from "../providers/dark-mode-provider";
 
 // Interface for interacting with the editor
 export interface CodeEditorRef {
@@ -36,6 +39,7 @@ const CodeEditorComponent = (props: Props, ref: React.Ref<CodeEditorRef>) => {
   const editorRef = React.useRef<EditorInstance | null>(null);
   const monacoRef = React.useRef<MonacoInstance | null>(null);
   const highlightRange = React.useRef<string[]>([]);
+  const { isDark } = useDarkMode();
 
   // Breakpoints
   useEditorBreakpoints({
@@ -75,9 +79,13 @@ const CodeEditorComponent = (props: Props, ref: React.Ref<CodeEditorRef>) => {
 
   return (
     <Editor
-      theme="vs-dark"
+      theme={isDark ? "ep-dark" : "ep-light"}
       defaultLanguage="brainfuck"
       defaultValue={props.defaultValue}
+      beforeMount={(monaco) => {
+        monaco.editor.defineTheme("ep-dark", darkTheme as any);
+        monaco.editor.defineTheme("ep-light", lightTheme as any);
+      }}
       onMount={(editor, monaco) => {
         if (!editor || !monaco) throw new Error("Error in initializing editor");
         editorRef.current = editor;

ui/code-editor/themes/dark.json

@@ -0,0 +1,125 @@
+{
+  "inherit": false,
+  "base": "vs-dark",
+  "colors": {
+    "focusBorder": "#48AFF0",
+    "foreground": "#d6dfe6",
+    "button.background": "#48AFF0",
+    "button.foreground": "#ffffff",
+    "dropdown.background": "#415869",
+    "input.background": "#415869",
+    "inputOption.activeBorder": "#48AFF0",
+    "list.activeSelectionBackground": "#48AFF080",
+    "list.activeSelectionForeground": "#FFFFFF",
+    "list.dropBackground": "#48AFF080",
+    "list.focusBackground": "#48AFF080",
+    "list.focusForeground": "#FFFFFF",
+    "list.highlightForeground": "#48AFF0",
+    "list.hoverBackground": "#FFFFFF1a",
+    "list.inactiveSelectionBackground": "#FFFFFF33",
+    "badge.background": "#48AFF0",
+    "badge.foreground": "#ffffff",
+    "sideBar.background": "#31424f",
+    "sideBarSectionHeader.background": "#394d5c",
+    "editorGroup.dropBackground": "#48AFF080",
+    "editorGroup.focusedEmptyBorder": "#48AFF0",
+    "editorGroupHeader.tabsBackground": "#31424f",
+    "editor.background": "#293742",
+    "editor.foreground": "#d6dfe6",
+    "editorLineNumber.foreground": "#FFFFFF4d",
+    "editorLineNumber.activeForeground": "#48AFF0",
+    "editor.lineHighlightBorder": "#FFFFFF1a",
+    "editor.rangeHighlightBackground": "#FFFFFF0d",
+    "editorWidget.background": "#31424f",
+    "editorHoverWidget.background": "#31424f",
+    "editorMarkerNavigation.background": "#31424f",
+    "panel.background": "#31424f",
+    "panel.border": "#FFFFFF1a",
+    "panelTitle.activeBorder": "#d6dfe680",
+    "panelTitle.inactiveForeground": "#d6dfe680",
+    "statusBar.background": "#202c34",
+    "statusBar.debuggingBackground": "#48AFF0",
+    "statusBar.debuggingForeground": "#ffffff",
+    "statusBar.noFolderBackground": "#202c34",
+    "statusBarItem.activeBackground": "#48AFF080",
+    "statusBarItem.hoverBackground": "#FFFFFF1a",
+    "statusBarItem.remoteBackground": "#48AFF0",
+    "statusBarItem.remoteForeground": "#ffffff",
+    "titleBar.activeBackground": "#202c34",
+    "pickerGroup.border": "#FFFFFF1a",
+    "debugToolBar.background": "#394d5c",
+    "editorBracketHighlight.foreground1": "#5adaff",
+    "editorBracketHighlight.foreground2": "#ff8f8f",
+    "editorBracketHighlight.foreground3": "#4cffb5",
+    "editorBracketHighlight.foreground4": "#ffdf7f",
+    "selection.background": "#48AFF0"
+  },
+  "rules": [
+    {
+      "foreground": "#ffffff",
+      "token": "plain"
+    },
+    {
+      "foreground": "#48aff0",
+      "token": "blue"
+    },
+    {
+      "foreground": "#3DCC91",
+      "token": "green"
+    },
+    {
+      "foreground": "#FFB366",
+      "token": "orange"
+    },
+    {
+      "foreground": "#FF7373",
+      "token": "red"
+    },
+    {
+      "foreground": "#FF6E4A",
+      "token": "vermillion"
+    },
+    {
+      "foreground": "#FF66A1",
+      "token": "rose"
+    },
+    {
+      "foreground": "#C274C2",
+      "token": "violet"
+    },
+    {
+      "foreground": "#AD99FF",
+      "token": "indigo"
+    },
+    {
+      "foreground": "#669EFF",
+      "token": "cobalt"
+    },
+    {
+      "foreground": "#2EE6D6",
+      "token": "turqoise"
+    },
+    {
+      "foreground": "#62D96B",
+      "token": "forest"
+    },
+    {
+      "foreground": "#D1F26D",
+      "token": "lime"
+    },
+    {
+      "foreground": "#FFC940",
+      "token": "gold"
+    },
+    {
+      "foreground": "#C99765",
+      "token": "sepia"
+    },
+    {
+      "foreground": "#7ba5c6",
+      "fontStyle": "italic",
+      "token": "comment"
+    }
+  ],
+  "encodedTokensColors": []
+}

ui/code-editor/themes/light.json

@@ -0,0 +1,144 @@
+{
+  "inherit": false,
+  "base": "vs-dark",
+  "colors": {
+    "focusBorder": "#0E5A8A",
+    "foreground": "#202B33",
+    "button.background": "#0E5A8A",
+    "button.foreground": "#ffffff",
+    "dropdown.background": "#ffffff",
+    "input.background": "#ffffff",
+    "inputOption.activeBorder": "#0E5A8A",
+    "list.activeSelectionBackground": "#0E5A8A80",
+    "list.activeSelectionForeground": "#FFFFFF",
+    "list.dropBackground": "#0E5A8A80",
+    "list.focusBackground": "#0E5A8A80",
+    "list.focusForeground": "#FFFFFF",
+    "list.highlightForeground": "#0E5A8A",
+    "list.hoverBackground": "#FFFFFF1a",
+    "list.inactiveSelectionBackground": "#FFFFFF33",
+    "activityBar.background": "#ffffff",
+    "activityBar.dropBackground": "#0E5A8A80",
+    "activityBarBadge.background": "#0E5A8A",
+    "activityBarBadge.foreground": "#ffffff",
+    "badge.background": "#0E5A8A",
+    "badge.foreground": "#ffffff",
+    "sideBar.background": "#ffffff",
+    "sideBarSectionHeader.background": "#ffffff",
+    "editorGroup.dropBackground": "#0E5A8A80",
+    "editorGroup.focusedEmptyBorder": "#0E5A8A",
+    "editorGroupHeader.tabsBackground": "#ffffff",
+    "tab.border": "#00000033",
+    "tab.activeBorder": "#0E5A8A",
+    "tab.inactiveBackground": "#ffffff",
+    "tab.activeModifiedBorder": "#0E5A8A",
+    "tab.inactiveModifiedBorder": "#083652",
+    "tab.unfocusedActiveModifiedBorder": "#0b486e",
+    "tab.unfocusedInactiveModifiedBorder": "#083652",
+    "editor.background": "#f5f8fa",
+    "editor.foreground": "#202B33",
+    "editor.selectionBackground": "#91d5ff",
+    "editor.findMatchBackground": "#91d5ff",
+    "editor.findMatchBorder": "#57bfff",
+    "editor.findMatchHighlightBackground": "#cee2ed",
+    "editorLineNumber.foreground": "#8A9BA8",
+    "editorLineNumber.activeForeground": "#000000",
+    "editor.lineHighlightBorder": "#D8E1E8",
+    "editor.rangeHighlightBackground": "#ffffff",
+    "editorWidget.background": "#ffffff",
+    "editorHoverWidget.background": "#ffffff",
+    "editorMarkerNavigation.background": "#ffffff",
+    "peekView.border": "#0E5A8A",
+    "peekViewEditor.background": "#c4c6c8",
+    "peekViewResult.background": "#ffffff",
+    "peekViewTitle.background": "#f5f8fa",
+    "panel.background": "#ffffff",
+    "panel.border": "#FFFFFF1a",
+    "panelTitle.activeBorder": "#202B3380",
+    "panelTitle.inactiveForeground": "#202B3380",
+    "statusBar.background": "#c4c6c8",
+    "statusBar.debuggingBackground": "#0E5A8A",
+    "statusBar.debuggingForeground": "#ffffff",
+    "statusBar.noFolderBackground": "#c4c6c8",
+    "statusBarItem.activeBackground": "#0E5A8A80",
+    "statusBarItem.hoverBackground": "#FFFFFF1a",
+    "statusBarItem.remoteBackground": "#0E5A8A",
+    "statusBarItem.remoteForeground": "#ffffff",
+    "titleBar.activeBackground": "#c4c6c8",
+    "pickerGroup.border": "#FFFFFF1a",
+    "debugToolBar.background": "#ffffff",
+    "editorBracketHighlight.foreground1": "#1170ac",
+    "editorBracketHighlight.foreground2": "#d23434",
+    "editorBracketHighlight.foreground3": "#0c7f50",
+    "editorBracketHighlight.foreground4": "#ffdf7f",
+    "selection.background": "#0E5A8A"
+  },
+  "rules": [
+    {
+      "foreground": "#202B33",
+      "token": "plain"
+    },
+    {
+      "foreground": "#137CBD",
+      "token": "blue"
+    },
+    {
+      "foreground": "#0F9960",
+      "token": "green"
+    },
+    {
+      "foreground": "#D9822B",
+      "token": "orange"
+    },
+    {
+      "foreground": "#DB3737",
+      "token": "red"
+    },
+    {
+      "foreground": "#D13913",
+      "token": "vermillion"
+    },
+    {
+      "foreground": "#DB2C6F",
+      "token": "rose"
+    },
+    {
+      "foreground": "#8F398F",
+      "token": "violet"
+    },
+    {
+      "foreground": "#7157D9",
+      "token": "indigo"
+    },
+    {
+      "foreground": "#2965CC",
+      "token": "cobalt"
+    },
+    {
+      "foreground": "#00B3A4",
+      "token": "turqoise"
+    },
+    {
+      "foreground": "#29A634",
+      "token": "forest"
+    },
+    {
+      "foreground": "#9BBF30",
+      "token": "lime"
+    },
+    {
+      "foreground": "#D99E0B",
+      "token": "gold"
+    },
+    {
+      "foreground": "#96622D",
+      "token": "sepia"
+    },
+    {
+      "foreground": "#5C7080",
+      "fontStyle": "italic",
+      "token": "comment"
+    }
+  ],
+  "encodedTokensColors": []
+}