Tengo una configuración de Mónaco donde puedes seleccionar entre más de 40 temas, el problema es que quiero adaptar mi sitio web Color's a los temas de Mónaco. ¿Cómo consigo eso? Intenté usar getComputedStyle(document.querySelector('.monaco-editor')) . Eso obtiene el color de fondo del editor, pero para el tema que había seleccionado antes. Si había seleccionado un tema claro y ahora selecciona un tema oscuro, el color mostrará el fondo del tema claro. ¿Qué puedo hacer?
SOLUCIONADO : El problema era que estaba tratando de obtener el color antes de que se cargara el tema. Lo hice funcionar usando promesas.
fetch(`/themes/${p}.json`) .then(data => data.json()) .then(data => { monaco.editor.defineTheme('theme', data); monaco.editor.setTheme('theme'); $('.sidebar').style.backgroundColor = pSBC(0.1, getComputedStyle($('.monaco-editor')).backgroundColor) $('.sidesidebar').style.backgroundColor = pSBC(0.1, getComputedStyle($('.monaco-editor')).backgroundColor) $('.skypackbar').style.backgroundColor = pSBC(0.1, getComputedStyle($('.monaco-editor')).backgroundColor) })El editor de Monaco usa variables CSS para definir sus colores. Consulte el patio de juegos del editor de Mónaco: https://microsoft.github.io/monaco-editor/playground.html
Consulte la referencia de color del tema de Visual Studio Code para cada nombre de color: https://code.visualstudio.com/api/references/theme-color
¿Por qué Visual Studio Code?, te preguntarás. Bueno, eso se debe a que vscode usa Monaco como control central y eso en realidad se extrajo de la base de código de vscode, para poder publicarlo como una herramienta independiente.