获取摩纳哥编辑器的背景色

Question

我有一个摩纳哥的设置，你可以选择从40多个主题，问题是，我想调整我的网站颜色的摩纳哥主题之一。我怎么弄到那个？我试过使用getComputedStyle(document.querySelector(‘.monaco-editor’))。这将获得编辑器的背景色，但是对于您之前选择的主题。如果您选择了一个光线主题，现在您选择一个黑暗主题，颜色将输出光主题的背景。我能做什么？

解决了的问题:问题在于它试图在主题加载之前获得颜色。我用承诺让它发挥作用。

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

摩纳哥编辑器使用CSS变量来定义其颜色。检查摩纳哥编辑器游乐场：https://microsoft.github.io/monaco-editor/playground.html

​

​

检查每个颜色名称的Visual代码主题颜色引用：https://code.visualstudio.com/api/references/theme-color

为什么是代码，您可能会问。这是因为vscode使用摩纳哥作为中央控制，它实际上是从vscode代码库中提取出来的，可以将其作为一个独立的工具发布。