6ca8519250
- Device breakpoint toggles (mobile 375px / tablet 768px / desktop 100%) - Editor theme selector with 6 themes (VS Dark/Light, High Contrast, Monokai, Dracula, GitHub Dark) - Starter template gallery with 8 pre-built templates (Todo, API Fetch, CSS Animation, etc.) - Code autocomplete with DOM/React type definitions and snippet completions - Devtools panels: console, network, elements, performance - Code formatter (Prettier), diff view, and linter integration
91 lines
3.3 KiB
JavaScript
91 lines
3.3 KiB
JavaScript
// Custom Monaco editor themes + theme list
|
|
|
|
export const THEMES = [
|
|
{ id: 'vs-dark', label: 'VS Dark' },
|
|
{ id: 'vs', label: 'VS Light' },
|
|
{ id: 'hc-black', label: 'High Contrast' },
|
|
{ id: 'monokai', label: 'Monokai' },
|
|
{ id: 'dracula', label: 'Dracula' },
|
|
{ id: 'github-dark', label: 'GitHub Dark' },
|
|
];
|
|
|
|
export function registerCustomThemes() {
|
|
monaco.editor.defineTheme('monokai', {
|
|
base: 'vs-dark',
|
|
inherit: true,
|
|
rules: [
|
|
{ token: 'comment', foreground: '75715E', fontStyle: 'italic' },
|
|
{ token: 'keyword', foreground: 'F92672' },
|
|
{ token: 'string', foreground: 'E6DB74' },
|
|
{ token: 'number', foreground: 'AE81FF' },
|
|
{ token: 'type', foreground: '66D9EF', fontStyle: 'italic' },
|
|
{ token: 'function', foreground: 'A6E22E' },
|
|
{ token: 'variable', foreground: 'F8F8F2' },
|
|
{ token: 'tag', foreground: 'F92672' },
|
|
{ token: 'attribute.name', foreground: 'A6E22E' },
|
|
{ token: 'attribute.value', foreground: 'E6DB74' },
|
|
{ token: 'delimiter', foreground: 'F8F8F2' },
|
|
],
|
|
colors: {
|
|
'editor.background': '#272822',
|
|
'editor.foreground': '#F8F8F2',
|
|
'editor.lineHighlightBackground': '#3E3D32',
|
|
'editor.selectionBackground': '#49483E',
|
|
'editorCursor.foreground': '#F8F8F0',
|
|
'editorWhitespace.foreground': '#464741',
|
|
},
|
|
});
|
|
|
|
monaco.editor.defineTheme('dracula', {
|
|
base: 'vs-dark',
|
|
inherit: true,
|
|
rules: [
|
|
{ token: 'comment', foreground: '6272A4', fontStyle: 'italic' },
|
|
{ token: 'keyword', foreground: 'FF79C6' },
|
|
{ token: 'string', foreground: 'F1FA8C' },
|
|
{ token: 'number', foreground: 'BD93F9' },
|
|
{ token: 'type', foreground: '8BE9FD', fontStyle: 'italic' },
|
|
{ token: 'function', foreground: '50FA7B' },
|
|
{ token: 'variable', foreground: 'F8F8F2' },
|
|
{ token: 'tag', foreground: 'FF79C6' },
|
|
{ token: 'attribute.name', foreground: '50FA7B' },
|
|
{ token: 'attribute.value', foreground: 'F1FA8C' },
|
|
{ token: 'delimiter', foreground: 'F8F8F2' },
|
|
],
|
|
colors: {
|
|
'editor.background': '#282A36',
|
|
'editor.foreground': '#F8F8F2',
|
|
'editor.lineHighlightBackground': '#44475A',
|
|
'editor.selectionBackground': '#44475A',
|
|
'editorCursor.foreground': '#F8F8F2',
|
|
'editorWhitespace.foreground': '#424450',
|
|
},
|
|
});
|
|
|
|
monaco.editor.defineTheme('github-dark', {
|
|
base: 'vs-dark',
|
|
inherit: true,
|
|
rules: [
|
|
{ token: 'comment', foreground: '8B949E', fontStyle: 'italic' },
|
|
{ token: 'keyword', foreground: 'FF7B72' },
|
|
{ token: 'string', foreground: 'A5D6FF' },
|
|
{ token: 'number', foreground: '79C0FF' },
|
|
{ token: 'type', foreground: 'FFA657' },
|
|
{ token: 'function', foreground: 'D2A8FF' },
|
|
{ token: 'variable', foreground: 'C9D1D9' },
|
|
{ token: 'tag', foreground: '7EE787' },
|
|
{ token: 'attribute.name', foreground: '79C0FF' },
|
|
{ token: 'attribute.value', foreground: 'A5D6FF' },
|
|
{ token: 'delimiter', foreground: 'C9D1D9' },
|
|
],
|
|
colors: {
|
|
'editor.background': '#0D1117',
|
|
'editor.foreground': '#C9D1D9',
|
|
'editor.lineHighlightBackground': '#161B22',
|
|
'editor.selectionBackground': '#264F78',
|
|
'editorCursor.foreground': '#C9D1D9',
|
|
'editorWhitespace.foreground': '#21262D',
|
|
},
|
|
});
|
|
}
|