Build matching color schemes to editor
This commit is contained in:
parent
50e788dd3c
commit
c521713b13
@ -71,10 +71,10 @@ export const sampleProgram = [
|
||||
export const editorTokensProvider: MonacoTokensProvider = {
|
||||
tokenizer: {
|
||||
root: [
|
||||
[/[-\+]/, "operator"],
|
||||
[/[<>]/, "annotation"],
|
||||
[/[\[\]]/, "keyword"],
|
||||
[/[\,\.]/, "type.identifier"],
|
||||
[/[-\+]/, "plain"],
|
||||
[/[<>]/, "green"],
|
||||
[/[\[\]]/, "violet"],
|
||||
[/[\,\.]/, "orange"],
|
||||
],
|
||||
},
|
||||
defaultToken: "comment",
|
||||
|
@ -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
125
ui/code-editor/themes/dark.json
Normal 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
144
ui/code-editor/themes/light.json
Normal 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": []
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user