Mark/esolang
1
0
Fork 0
Code Issues Packages Activity

Build matching color schemes to editor

Browse Source
This commit is contained in:
Nilay Majorwar
2021-12-17 22:42:17 +05:30
parent 50e788dd3c
commit c521713b13
4 changed files with 282 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
engines/brainfuck/constants.ts
View File

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

10
ui/code-editor/index.tsx
View File

@ -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;

125
ui/code-editor/themes/dark.json Normal file
View File

@ -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": []
}

144
ui/code-editor/themes/light.json Normal file
View File

@ -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": []
}