I have read your document, but I still don't know how to write it to configure my own color theme.

I am using Vite+Vue3 The latest monaco-vscode-api package used

I read #465 ,but I'm confused.

// default monaco-editor imports
import * as monaco from 'monaco-editor';
import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';

// utilities to override Monaco services
import { initialize } from 'vscode/services'
import getConfigurationServiceOverride, { updateUserConfiguration } from '@codingame/monaco-vscode-configuration-service-override'

window.MonacoEnvironment = {
  getWorker: (_moduleId, _label) => new editorWorker()
}

// overriding Monaco service with VSCode
await initialize({
    ...getConfigurationServiceOverride(),
});

// json config like in vscode settings.json
updateUserConfiguration(`{
    "editor.fontSize": 30,
    "editor.lineHeight": 30,
    "editor.fontFamily": "monospace",
    "editor.fontWeight": "bold",
    "editor.letterSpacing": 0,
}`)

// creating an editor with VSCode configuration
monaco.editor.create(document.getElementById('editor')!, {
    value: "Editor with VSCode config and large bold fonts",
});

Yes, this way I can configure some font operations. What if I want to configure my own defined theme The original method of using Monaco was relatively simple， eg

    monaco.editor.defineTheme("myTheme", {
      base: "vs-dark",
      inherit: true,
      rules: [],
      colors: {
        "editor.foreground": "#FFFFFF",
        "editor.background": "#393939",
        "editorCursor.foreground": "#FFFFFF",
        "editor.lineHighlightBackground": "#40405A20",
        "editorLineNumber.foreground": "#ffffff",
        "editor.selectionBackground": "#FFFFFF30",
        "editor.inactiveSelectionBackground": "#88000015",
      },
    });
    monaco.editor.setTheme("myTheme");

Of course, I made some attempts but it didn't work. e.g

    updateUserConfiguration(`{
      "editor.foreground": "#FFFFFF",
      "editor.background": "#393939",
      "editorCursor.foreground": "#FFFFFF",
      "editor.lineHighlightBackground": "#40405A20",
      "editorLineNumber.foreground": "#ffffff",
      "editor.selectionBackground": "#FFFFFF30",
      "editor.inactiveSelectionBackground": "#88000015",
    }`)

I admit that my programming ability is weak, and I hope you can provide beginners with a rich set of operation and learning documents.

I read #517 Benefiting greatly But it's been several days now and there hasn't been any progress.

<template>
    <div ref="cusEditor" style="height: 100%;"></div>
</template>

<script setup lang="ts">
import * as monaco from 'monaco-editor';
import { initialize } from 'vscode/services'

import "vscode/localExtensionHost";
import { initWebSocketAndStartClient } from './lsp-client'
import '@codingame/monaco-vscode-python-default-extension';
import "@codingame/monaco-vscode-theme-defaults-default-extension";

import getLanguagesServiceOverride from "@codingame/monaco-vscode-languages-service-override";
import getThemeServiceOverride from "@codingame/monaco-vscode-theme-service-override";
import getTextMateServiceOverride from "@codingame/monaco-vscode-textmate-service-override";
import getConfigurationServiceOverride, { updateUserConfiguration } from '@codingame/monaco-vscode-configuration-service-override'
import * as vscode from 'vscode'

import { ref, shallowRef } from 'vue';
import { useIdeStore } from '@/stores/ide';
import { storeToRefs } from 'pinia';
// import { language as pythonLanguage } from 'monaco-editor/esm/vs/basic-languages/python/python.js';

// we need to import this so monaco-languageclient can use vscode-api

// import  {initWebSocketAndStartClient}  from './lsp-client';
import {OPTIONS_BASE} from "./registerCompletion";
import {COLOER_BASE} from "./registerColor";
// everything else is the same except the last line

const ideStore = useIdeStore();
const { ideInfo } = storeToRefs(ideStore);

interface IProps {
  modelValue: string;
  disabled?: boolean;
  editorConfig?: { language: string; theme: string };
  onchange?: (value: string) => void;

}
const props = withDefaults(defineProps<IProps>(), {
  modelValue: '',
  disabled: false,
  editorConfig: () => ({ language: 'python', theme: 'vs-dark' }),
  onchange: (value: string) => {
  }
});

const cusEditor = ref<HTMLElement | null>(null);
let editor: monaco.editor.IStandaloneCodeEditor | null = null;
let monacoProviderRef = ref();
// let monacoProviderRef = ref()
// const modelValueRef = ref<string>();

export type WorkerLoader = () => Worker;
const workerLoaders: Partial<Record<string, WorkerLoader>> = {
    TextEditorWorker: () => new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker.js', import.meta.url), { type: 'module' }),
    TextMateWorker: () => new Worker(new URL('@codingame/monaco-vscode-textmate-service-override/worker', import.meta.url), { type: 'module' })
};

window.MonacoEnvironment = {
  getWorker: function (_moduleId, label) {
    // console.log('getWorker', _moduleId, label);
    const workerFactory = workerLoaders[label];
  if (workerFactory != null) {
    return workerFactory();
  }
    throw new Error(`Worker ${label} not found`);
  }
};

onMounted(async () => {
  try {
    console.log('Initializing Monaco Editor services...');

    if (ideInfo.value.isFinishEditorInit === false) {
      await initialize({
        ...getConfigurationServiceOverride(),
        // ...getTextMateServiceOverride(),
        // ...getThemeServiceOverride(),
        ...getLanguagesServiceOverride(),
      });
      ideStore.setIsFinishEditorInit();
    }

    // updateUserConfiguration(`{
    //   "editor.foreground": "#FFFFFF",
    //   "editor.background": "#393939",
    //   "editorCursor.foreground": "#FFFFFF",
    //   "editor.lineHighlightBackground": "#40405A20",
    //   "editorLineNumber.foreground": "#ffffff",
    //   "editor.selectionBackground": "#FFFFFF30",
    //   "editor.inactiveSelectionBackground": "#88000015",
    // }`)
    console.log('Creating Monaco Editor instance...');
    const editor = monaco.editor.create(cusEditor.value, {
      value: props.modelValue,
      theme: props.editorConfig.theme,
      minimap: {
        enabled: false // 禁用 MiniMap
      },
      ...OPTIONS_BASE
    });
    monaco.editor.defineTheme("myTheme", {
      base: "vs-dark",
      inherit: true,
      rules: [],
      colors: {
        "editor.foreground": "#FFFFFF",
        "editor.background": "#393939",
        "editorCursor.foreground": "#FFFFFF",
        "editor.lineHighlightBackground": "#40405A20",
        "editorLineNumber.foreground": "#ffffff",
        "editor.selectionBackground": "#FFFFFF30",
        "editor.inactiveSelectionBackground": "#88000015",
      },
    });
    monaco.editor.setTheme("myTheme");
    setLanguagesTips();
    const url = "ws://localhost:21001/api/v1/ws/lspserver";
    console.log('Initializing WebSocket and starting LSP client...');
    initWebSocketAndStartClient(url);

  } catch (e) {
    console.error('Error initializing Monaco Editor:', e);
  }
});

const setLanguagesTips = () => {

};

const onDispose = () => {
    editor && editor.dispose && editor.dispose();
};
onUnmounted(() => {
    onDispose();
});
</script>

Thanks

CodinGame / monaco-vscode-api

I have read your document, but I still don't know how to write it to configure my own color theme. #531