Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 | 1x 1x 1x 1x 1x 1x 1x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 2x 1x 1x 1x 1x 1x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 8x 1x 1x | import React from "react";
import "./MainScreen.css";
import Editor, { loader } from "@monaco-editor/react";
import { useTheme } from "../../context/ThemeContext";
// Define custom Monaco themes that match the UI
const defineCustomThemes = (monaco) => {
monaco.editor.defineTheme("obsidian", {
base: "vs-dark",
inherit: true,
rules: [],
colors: {
"editor.background": "#0a0a0f",
"editor.foreground": "#e4e4ef",
"editorLineNumber.foreground": "#5a5a72",
"editorLineNumber.activeForeground": "#9898b0",
"editor.lineHighlightBackground": "#111118",
"editor.selectionBackground": "#00e5ff20",
"editorCursor.foreground": "#00e5ff",
"editorWidget.background": "#16161f",
"editorWidget.border": "#2a2a3a",
"input.background": "#111118",
"input.border": "#2a2a3a",
"scrollbarSlider.background": "#2a2a3a80",
"scrollbarSlider.hoverBackground": "#3a3a52",
},
});
monaco.editor.defineTheme("bone", {
base: "vs",
inherit: true,
rules: [],
colors: {
"editor.background": "#ffffff",
"editor.foreground": "#2d2d2d",
"editorLineNumber.foreground": "#9a9a9a",
"editorLineNumber.activeForeground": "#5c5c5c",
"editor.lineHighlightBackground": "#f5f0e8",
"editor.selectionBackground": "#c45d3e18",
"editorCursor.foreground": "#c45d3e",
"editorWidget.background": "#ffffff",
"editorWidget.border": "#ddd5c8",
"input.background": "#ffffff",
"input.border": "#ddd5c8",
"scrollbarSlider.background": "#c5baa880",
"scrollbarSlider.hoverBackground": "#c5baa8",
},
});
};
// Register themes before Monaco loads
loader.init().then(defineCustomThemes);
const MainScreen = () => {
const { isDark } = useTheme();
return (
<div className="mainScreen">
<Editor
height="35vh"
defaultLanguage="cpp"
defaultValue="// some comment"
theme={isDark ? "obsidian" : "bone"}
options={{
fontSize: 13,
fontFamily: "'JetBrains Mono', 'Fira Code', monospace",
minimap: { enabled: false },
scrollBeyondLastLine: false,
padding: { top: 12 },
cursorStyle: "line",
cursorWidth: 2,
}}
/>
</div>
);
};
export default MainScreen;
|