获取 Monaco 编辑器背景颜色

Question

I've got a Monaco setup where you can select from over 40 themes, the problem is that I want to adapt my website Color's to Monaco theme ones. How do I get that? I tried using getComputedStyle(document.querySelector('.monaco-editor')) . That gets the background color of the editor, but for the theme you had selected before. If you had selected a light theme and now you select a dark theme, the color will output the light theme's background. What could I do?

SOLVED : The problem was because it was trying to get the colour before the theme was loading. I got it working using promises.

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)
  })

Answer 1

The Monaco editor uses CSS variables to define its colors. Check the Monaco Editor Playground: https://microsoft.github.io/monaco-editor/playground.html

Check the Visual Studio Code theme color reference for each color name: https://code.visualstudio.com/api/references/theme-color

Why Visual Studio Code, you may ask. Well, that's because vscode uses Monaco as the central control and that was actually extracted from the vscode code base, to be able to publish it as a standalone tool.