monaco editor 커스텀

Author: Danto7632

src/components/ide/IDE.css

@@ -898,6 +898,38 @@ body.dark-mode .save-button:hover {
     overflow: hidden;
 }
 
+.ide-container .monaco-editor,
+.ide-container .monaco-editor .overflow-guard,
+.ide-container .monaco-editor .monaco-editor-background,
+.ide-container .monaco-editor .view-overlays,
+.ide-container .monaco-editor .margin-view-overlays {
+    background-color: var(--ide-editor-bg) !important;
+}
+
+.ide-container .monaco-editor .view-lines {
+    background-color: var(--ide-editor-bg) !important;
+}
+
+.ide-container .monaco-editor .margin,
+.ide-container .monaco-editor .glyph-margin {
+    background-color: var(--ide-editor-gutter) !important;
+    border-right: 1px solid var(--border-subtle);
+}
+
+.ide-container .monaco-editor .scroll-decoration {
+    box-shadow: none;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.12), transparent);
+}
+
+.ide-container .monaco-editor .line-numbers,
+.ide-container .monaco-editor .margin .current-line {
+    color: var(--ide-editor-line-number) !important;
+}
+
+.ide-container .monaco-editor .line-numbers.active-line-number {
+    color: var(--accent-primary) !important;
+}
+
 .right-panel {
     width: 400px;
     min-width: 400px;

src/components/ide/IDE.jsx

@@ -524,52 +524,7 @@ const IDE = () => {
         editor.addCommand(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyS, function() {
             handleSave();
         });
-
-        monaco.editor.defineTheme('custom-dark', {
-            base: 'vs-dark',
-            inherit: true,
-            rules: [
-                { token: '', foreground: 'D4D4D4', background: '1E1E1E' },
-                { token: 'comment', foreground: '6A9955' },
-                { token: 'string', foreground: 'CE9178' },
-                { token: 'keyword', foreground: '569CD6' },
-                { token: 'number', foreground: 'B5CEA8' }
-            ],
-            colors: {
-                'editor.background': '#1E1E1E',
-                'editorLineNumber.foreground': '#858585',
-                'editorCursor.foreground': '#AEAFAD',
-                'editor.selectionBackground': '#264F78',
-                'editor.lineHighlightBackground': '#2A2D2E'
-            }
-        });
-
-        monaco.editor.defineTheme('custom-light', {
-            base: 'vs',
-            inherit: true,
-            rules: [
-                { token: '', foreground: '2D2D2D', background: 'FFFFFF' },
-                { token: 'comment', foreground: '008000' },
-                { token: 'string', foreground: 'A31515' },
-                { token: 'keyword', foreground: '0000FF' },
-                { token: 'number', foreground: '098658' }
-            ],
-            colors: {
-                'editor.background': '#FFFFFF',
-                'editorLineNumber.foreground': '#237893',
-                'editorCursor.foreground': '#000000',
-                'editor.selectionBackground': '#ADD6FF',
-                'editor.lineHighlightBackground': '#F5F5F5'
-            }
-        });
-
-        const updateEditorTheme = (monaco) => {
-            if (!monaco && !editorRef.current) return;
-            const m = monaco || window.monaco;
-            if (m) { m.editor.setTheme(isDarkMode ? 'custom-dark' : 'custom-light'); }
-        };
-
-        updateEditorTheme(monaco);
+        monaco.editor.setTheme(isDarkMode ? 'vs-dark' : 'vs');
 
         setTimeout(() => {
             try { editorRef.current.layout(); } catch (e) { console.warn('에디터 초기 레이아웃 설정 중 오류:', e); }
@@ -881,9 +836,8 @@ const IDE = () => {
                     if (newIsDarkMode !== isDarkMode) {
                         setIsDarkMode(newIsDarkMode);
 
-                        if (editorRef.current && monacoRef.current) {
-                            const newTheme = newIsDarkMode ? 'custom-dark' : 'custom-light';
-                            monacoRef.current.editor.setTheme(newTheme);
+                        if (monacoRef.current) {
+                            monacoRef.current.editor.setTheme(newIsDarkMode ? 'vs-dark' : 'vs');
                         }
                     }
                 }

src/index.css

@@ -34,6 +34,9 @@ body {
   --text-muted: #5e5980;
   --border-subtle: rgba(15, 23, 42, 0.08);
   --border-strong: rgba(15, 23, 42, 0.12);
+  --ide-editor-bg: #ffffff;
+  --ide-editor-gutter: #f3f4fa;
+  --ide-editor-line-number: #6c678f;
 }
 
 body.dark-mode {
@@ -60,6 +63,9 @@ body.dark-mode {
   --text-muted: #9b97c9;
   --border-subtle: rgba(124, 104, 220, 0.26);
   --border-strong: rgba(124, 104, 220, 0.42);
+  --ide-editor-bg: #151028;
+  --ide-editor-gutter: #0d0a19;
+  --ide-editor-line-number: #9d98df;
   background-color: var(--surface-body);
   color: var(--text-primary);
 }